vue 组件通讯

组件通讯的方案

1. 通过 props 传递 (父子组件传值)
2. 通过 $emit 触发 父组件自定义事件
3. 父组件使用 ref 访问子组件实例
4. EventBus ：需要中间文件，$emit触发事件，$on监听
5. $parent 或者 $root : 可以利用祖先组件搭桥
   • this.$parent.on('add',this.add) 监听事件
   • this.$parent.emit('add')触发事件
6. $children
7. $attrs 与 $listeners (可以访问未在props接收的属性和方法)
8. Provide（祖先提供） 与 Inject （后代注入）
9. Vuex

总结：

1. 父子： props 与 $emit进行传递，也可选择ref
2. 兄弟：$bus，$parent
3. 祖先与后代：$attrs与$listeners 或者 Provide与 Inject
4. 复杂关系: vuex存放共享的变量

demo

1. 父子： props 与 $emit进行传递，也可选择ref

// parent.vue
<Children ref="child" :msg=msg @handleClick="handleClick"></Children>
// JS部分
<script>
// $refs可以访问子组件的属性和方法
console.log(this.$refs.child.str) // abc
</script>

// Children.vue  只写核心代码，不是完整组件
<template>
<div @click="$emit('handleClick', 'good')">
{{mst}}
<div>
</template>
<script>
props: ['msg', 'handleClick']
data(){
	return {str: 'abc'}
}
</script>

2. 兄弟：$bus，$parent

// evenBus.js  
// 方法一：创建一个中央时间总线类 
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  // 把事件以{fnName: []}存起来
  $on(fnName, fn) {  
    this.callbacks[fnName] = this.callbacks[fnName] || [];  
    this.callbacks[fnName].push(fn);  
  }  
  // 通过方法名调用
  $emit(fnName, args) {  
    if (this.callbacks[fnName]) {  
      this.callbacks[fnName].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上 
 
// 方法二：Vue已经实现了Bus的功能，可以直接引入使用
import Vue from 'vue'
Vue.prototype.$bus = new Vue() 
// 使用----------------------------------------------------------
// Com1.vue 添加事件
this.$bus.$on('foo', this.handle)  
// Com2.vue 触发事件
this.$bus.$emit('foo')  

3. 祖先与后代：$attrs与$listeners 或者 Provide与 Inject

// parent.vue ---------------------->
<Child foo="foo" @testEvent="testEvent"/> 
 
// Child.vue：并未在props中声明foo  -------------------->
<p>{{$attrs.foo}}</p>  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  

// Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">  
{{foo}}  
</div>  

// parent.vue ---------------------->
<Child/>
provide(){  
    return {  
        foo:'foo',
        testEvent: this.testEvent
    }  
},
methods: {
	testEvent () {
		console.log("你好")
	}
}
// Child.vue  -------------------->
<Grandson></Grandson>  

// Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">  
{{foo}}  
</div>  
inject:['foo', 'testEvent']

4. 复杂关系: vuex存放共享的变量

   • state: 用来存放共享变量的地方

   • getter: 可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

   • mutations: 用来存放修改state的方法。

   • actions: 也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作