Vue之父组件向子组件传递数据

来源:互联网 发布:数据配置获取失败 编辑:程序博客网 时间:2024/06/05 03:19

1.创建子组件,在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props,然后创建一个名为message的属性

这里写图片描述

3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

这里写图片描述

4.我们依然可以对message的值进行v-bind动态绑定

这里写图片描述

5.对于图片的显示注意要使用’v-bind’进行绑定,因为这里是显示在属性中所以并不用大括号,而显示在HTML中的数据必须使用大括号进行包裹

这里写图片描述

总结一下:

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性