标签：记录 通过 obj 传递 行操作 模板 def 数据 bind
上节讲了子组件向父组件传值(传送门)，本节记录父组件向子组件传值
一：父组件通过向子组件绑定自定义属性的形式向子组件传递数据
<!-- 父组件 -->
<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 } }, }
这样 ，便完成了父向子 传值的内容。
以上。
标签：记录 通过 obj 传递 行操作 模板 def 数据 bind
原文地址：https://www.cnblogs.com/hjk1124/p/12344897.html
