element实战二（非父子组件传值）

非父子间传值

实现从app.vue传值给child.vue

• 事件总线

// 原理上就是建立一个公共的js文件，专门用来传递消息
// bus.js
import Vue from 'vue'
export default new Vue;
// 在需要传递消息的地方引入
import bus from './bus.js'
// 传递消息
bus.$emit('msg', val)
// 接受消息
bus.$emit('msg', val => {
console.log(val)
})

1. 编写公共bus.js，放在src/util下

image.png
2. 在app.vue中，导入注册公共bus.js，绑定msg事件
image.png
3. 在child.vue中，导入注册公共bus.js，监听msg事件
image.png

• $attrs / listeners

间接组件app.vue，父组件parent.vue,子组件child.vue
此方法不同于第一种，需要借助父组件parent.vue

// 解决多级组件间传值的问题
// $attr 将父组件中不包含props的属性传入子组件，通常配合 interitAttrs 选项一起使用。
// 如果不想在dom上出现属性，可设置interitAttrs: false
// $listeners监听子组件中数据变化，传递给父组件

1. 在app.vue下，定义三个值，并且传递给parent.vue

image.png
2. 在parent.vue中，绑定属性
注意此处v-bind不可以使用缩写
image.png
3. 在child.vue中直接获取
image.png
注意：
image.png
此时在后台只会打印两个值，原因是在child.vue中，我们在props中定义了同名字的msg。注意在app.vue传‘a’时变量名也叫msg，会覆盖。