vue父组件向子组件传值——props

父组件向子组件传值用props

 

使用：

1.js里import引入子组件:
import cpn from '子组件路径'
2.js的components添加上cpn
components: {
    cnp
  },
3.页面使用：
<cpn></cpn>

父组件（向子组件传值：）

<cpn :cmovies="movies" :cmsg="msg" />

<script> 

　　import cpn from '子组件路径'

  export default {   name: '页面名',   components: {     cpn   },   data() {     return { 　　　movies:[{id:'001',lable:'战狼'}，{id:'002',lable:'红海行动'}，{id:'003',lable:'绿巨人'}，{id:'004',lable:'举起手来'}], 　　　msg:'你好，这是要向组件传过去的数据' 　　} 　}

</script>

 

子组件页面接收：

<template>
　　<div>
    　　<div class="title">{{cmsg}}<div>
    　　<div>
        　　<ul>
            　　<li v-for="item in cmovies" :key="item.id">
        
                {{ item.label }}
            
           　　 </li>   
        　　</ul>
    　　</div>
　　</div>
</template>

<script>　　

　export default {   　　name: '页面名',　　　 　　　// 接受父组件传递的值   　　props: {     　　cmovies: {       　　type: Array,,       　　default() {         　　return []       　　}     　　}, 　　　　cmsg: { 　　　　　　type: String, 　　　　　　default:'接收数据时给定一个默认值'　　　　 　　　　}   　　}, 　}

</script>

父子组件上下红色部分对应

 

props接收传过来的值有三种接收方式：

第一种：直接接收

props：['cmovies']

 

第二种：指定类型

props：{    
    cmovies：Array,
    cmsg:String
}

 

第三种：设定默认值和必须传——类型是对象或数组时，默认值必须是函数

props: {
  cmovies: {
    type: Array,,
    default() {
      return []
    },
    require:true
  },
　cmsg: {
　　type: String,
　　default:'接收数据时给定一个默认值'　　　　
 }
},    

 

验证都支持以下数据类型：String  Number  Boolean  Array  Object  Date  Function  Symbol

当有自定义构造函数时，验证也支持自定义的类型

props:{
    // 基础的类型检查（‘null’匹配任何类型）
    propA:Number,
    // 多个可能的类型
    propsB: [String,Number],
    // 必须的字符串
    propC: {
        type:String,
        required:true
    },
    // 有默认值的数字
    propD:{
        type:Number,
        default:100
    },
    // 有默认值的对象
    propE:{
        type:Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default:function(){
            return {message:'hello'}
        }
    },
    // 自定义验证函数
    propF:{
        validator: function(value){
            // 这个必须匹配下列字符串中的一个
            return:['success','warning','danger'],indexof(value) !== -1
        }
}

 

 

 

 

 

 

 

标签：向子,vue,String,default,props,组件,默认值,type
来源： https://www.cnblogs.com/magic-world/p/15018753.html