vue父组件向子组件传值

Posted 2021-03-08 hjk1124

上节讲了子组件向父组件传值(传送门)，本节记录父组件向子组件传值

　　一：父组件通过向子组件绑定自定义属性的形式向子组件传递数据

　 

 <!-- 父组件 -->
    <div id="app">
        <cpn :cmovies=‘movies‘></cpn>
    </div>

 

　　　　使用v-bind规定子组件要接收的属性为cmovies,要接收的数据是父元素的movies，此时cmovies作为子组件的数据对象

　　　　说明：

　　　　　　1.在父组件上通过v-bind绑定自定义属性，子组件通过props项接收这个属性，并将其作为数据变量进行操作

　　　　　　2.语法： <cpn  :定义子组件接收时使用的属性名  = ‘父组件的数据变量’></cpn>

　　二：子组件通过props接收父组件传递来的数据并对其操作

　　　　

 // 子组件
        const cpn = {
            template: ‘#ccp‘ ,
            props: [‘cmovies‘],
        }

　　　　子组件下的 template模板

   <template id="ccp">
        <div>
             <!-- 子组件根据父组件定义的属性名对接收到的父组件数据进行操作 -->
            <h1 v-for=‘item of cmovies‘>{{item}}</h1>
        </div>
    </template>

　　　　说明：

　　　　　　1. 子组件使用props项接收父组件规定的属性名，可以在子组件内部将这个属性名作为子组件的数据对象操作

　　　　　　2. 在使用props接收到父组件传递到的数据时，就可以将父组件规定的属性名进行操作了

　　

　　一点笔记：

　　　　可以将子组件接收到的数据作为一个obj格式来个性化定制数据。

  // 子组件
        const cpn = {
            template: ‘#ccp‘ ,
            props: {
              cmovies:{
                  type: Array, // 定义接收到的数据的类型
                  default:‘这个数据变量的默认值‘,
                  required:false //规定这个数据是否必传,默认false
              }  
            },
        }

这样 ，便完成了父向子 传值的内容。

以上。