上节讲了子组件向父组件传值(传送门),本节记录父组件向子组件传值
一:父组件通过向子组件绑定自定义属性的形式向子组件传递数据
<!-- 父组件 --> <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 } }, }
这样 ,便完成了父向子 传值的内容。
以上。
原文地址:https://www.cnblogs.com/hjk1124/p/12344897.html
时间: 2024-10-09 08:30:01