组件通信

我们知道 vue 是 单页面应用 切换是组件与组件之间的切换
那么在实际项目开发中组件之间如何传值?

父传子

在App主组件中也就是父组件引入子组件A

在子组件中接收父组件传过来的值

效果

父传子
1、在父组件中的子组件标签上绑定一个属性，挂载要传输的变量
2、在子组件中用props属性来接受，接受的格式props:[“自定义属性”]
3、直接使用接受的数据

子传父




点击前和点击后的效果

子传父
1、在父组件中定义一个方法
2、在父组件中的子组件标签上自定义一个事件，挂载1定义的方法
3、在子组件的方法中通过this.$emit()来调用父组件的方法,要传输的数据是以实参的方式来传递 this.$emit(“自定义事件名”,“参数”)
4、在父组件的方法中接受这参数就行

兄弟传值：

1、如果有共同的父组件，可以实用父传子然后再子传父
2、bus总线传值
1、定义空的vue实例来担任总线的位置
2、在要发送的子组件中引入总线，通过Bus.$emit()来派发事件,将要传输的数据以参数的形式传递
3、在接受的一方引入总线，通过Bus.$on()来监听事件，接受参数

在主组件中引入A B 两个组件 此时 A B 组件 是兄弟关系

A组件传值给B 组件
通过Bus.$emit()来派发事件,将要传输的数据以参数的形式传递

在B 组件中 通过Bus.$on()来监听事件，接受参数

定义空的 vue 实例来担任总线的位置

点击前和点击后的效果

props数据类型验证：
从父组件传过的数据，验证他的数据类型
在接受父组件传过来数据的时候使用对象的方式来接受数据 props:{“自定义属性”,数据类型}
可以验证的数据类型：String Number Object Boolean Function Date Array Symbol