Vue笔记——父组件向子组件传递数据

Vue项目中经常使用到组件之间的数值传递,实现的方法很多,但是原理基本上大同小异。
子组件向父组件出传递数据,使用自定义事件的方式。
父组件向子组件传递数据,使用props属性的方式。
推荐文章:Vue笔记——子组件向父组件传递数据

一、父组件中动态绑定数据到子组件

父组件向子组件传递数据,首先要在父组件中使用v-bind命令将要传递的数据绑定到子组件上。比如我们要从父组件中给子组件传递两条数据,示例代码如下:






二、子组件中接收传递过来的数据

父组件中完成数据绑定之后,在子组件中的props属性接收一下父组件传递过来的数据,要接收多少数据,就在pros属性中写多少数据。比如要接收两条数据,示例代码如下:







三、效果展示

Vue笔记——父组件向子组件传递数据_第1张图片

你可能感兴趣的:(Vue笔记——父组件向子组件传递数据)