Vue.js父级向子级传递信息

父组件把数据传递给子组件:

注意!!!:子组件中的data是一个函数,在其中写return { }。返回数据

1、在父组件中,正常定义自己的数据。

Vue.js父级向子级传递信息
父中有数据了,就意味着在父的视图中就可以得到数据了。

2、在父组件的模板中通过属性绑定把数据绑定到子组件上。

Vue.js父级向子级传递信息

3、在子组件中定义props属性。用来接收父组件传递的数据。

Vue.js父级向子级传递信息
在props中定义的属性,是专门用来从父组件中去获取数据的,定义好了之,就可以像定义在data中的数据项一样,去正常的使用。

4、在子组件模板中使用数据

Vue.js父级向子级传递信息
父传子有一个核心 子组件中的props配置项
父子传递,讲究”你情我愿”,父需要绑定数据,子需要接收数据