学习前端之vue.js组件传值

一、什么是组件传值？

一个组件标签myCom写在另一个组件myApp模块中,那么这两个组件即产生了父子关系,myCom是子组件, myApp是父组件。

如果父组件中有一些数据,想要拿到子组件里面展示,就需要使用组件传值来实现。

组件传值又分为:父传子,子传父,兄弟组件传值

二、实现组件传值方法

1，插槽传值--slot传值

第一步：在组件标签的开始标签和结束标签写入一段数据或者一段html

第二步：在组件模板中合适的位置添加slot标签显示插槽数据

2，父传子--props属性传值

第一步：在子组件对象中添加props字段，在props数组中声明自定义属性，传递多条数据的时候可以声明多条自定义属性，属性名可以使用小驼峰，也可以全部小写

第二步： 在组件标签上，绑定props自定义属性，并赋值（需要从父组件传递到子组件的值）注意：如果属性名定义的是小驼峰，那么调用的时候要改成 - 连接的小写

第三步：在组件模板中，使用props定义的属性渲染数据，使用方法和自己组件data中定义的数据使用方法一致。注意：在模板中使用属性要和props中定义的属性保持一致

 

 3，子传父

第一步：在子组件中调用$emit函数发射一个自定义事件

参数一：自定义的事件名（不支持驼峰），参数二：要传输的数据

发射自定义事件，可以理解为触发事件，触发在组件标签上绑定的事件

第二步：在子组件标签上，用v-on/@绑定自定义事件，调用父组件中的函数

第三步：在父组件中定义自定义事件的处理函数，把参数赋值给父组件并展示

4，兄弟组件传值

第一步：在全局范围内，创建一个vue空对象，取名为bus总线

 

第二步：需要发送数据的时候，使用bus总线调用$emit（）发送数据

参数一：自定义的事件名（不支持驼峰），参数二：要传输的数据

 

第三步：在目标组件的初始化函数中，使用bus总线监听自定义事件，获取数据，data为获取到的数据

 

 注意事项：

1，使用bue总线接收数据的时候，事件处理函数要使用箭头函数来写，保证this指向为当前组件对象

 2，bus.$on 监听必须在bus.$emit发送之前执行,才能触发事件,接收数据