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

父组件向子组件传值用props

 

使用：

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

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

<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>

 

2.子组件页面接收：

<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
        }
}

 

 

 补充，当传过去的值需要驼峰命名时：

父：
<cpn :c-movies="movies" :c-msg="msg" />

 子：

props: {

    cMovies: {

       type: Array,,

       default() {

         return []

       }

   },

  cMsg: {

     type: String,

     default:'接收数据时给定一个默认值'　　　　

   }

},