(1). 父->子:
a. 为什么: 和面向对象不同!父组件中的数据成员,子组件无权直接使用!因为组件的模型数据都是自己专属!
b. 何时: 只要子组件希望使用父组件中的数据成员时
c. 如何: 2步:
1). 在父组件中,将子组件需要的成员绑定给一个自定义的属性。
组件todo中: {
data(){ return { tasks:[ xxx , xxx , ...] } }
template:`
...
<todo-list :tasks="tasks">
...
`
黑色的tasks不能改名,因为是父组件自己的数据成员。
红色的tasks可以自定义名称,表示自定义的一个属性
。但是,这里强烈建议 保持一致。因为程序中,任何位置,
只要使用同一个对象,最好保持名称一致。否则会有歧义。
:tasks="tasks" 的意思是将黑色的tasks数组,赋值给子组
件上红色的自定义属性tasks。
2). 在子组件中,通过props获得父组件放在子组件中的自定义属性值。
子组件todoList中:{
props:[ "tasks" ], 从tasks属性里,取出父亲给的tasks数组。
结果: props中的变量用法和data中变量的用法完全一样。
只不过data中的变量是自己定义的,props中的属性值来
自于父组件给的。所以,子组件模板中可使用tasks属性
中获得的父组件给的数组对象进行遍历和绑定。
template:`
...
<todo-item v-for="(t,i) of tasks">
`