vue-组件间通信

抽个小空，写个总结。方便以后查看

有不对的，请指出，非常感谢；

 

1.父子组件通信

1. 父组件 =》子组件

1. props

　　　　　　　　在父组件中：

　　　　　　　　　　调用子组件的时候，将msg传递 可以是变量 用：

<tips :msg="msg"></tips>

　　

　　　　　　　　在子组件中：

　　　　　　　　通过props接受父组件传递过来的数据 ：msg

//template代码
 <div class="myalert">
    {{msg}}
    <a class="close" @click="closeFn">确定</a>
  </div>
//js代码
props:{
        msg:{require:true}
  },

　　

　　　　　　　2.refs

　　　　　　　　父组件中：

用ref标记子组件
<test msg="测试数据" ref="test"></test>
js代码  通过$refs找到子组件 实例 并调用子组件的方法，并传参
this.$refs.test.showFn('test');

　　　　　　　　子组件中：

子组件的定义的方法
showFn(msg){
     this.showFlag=true;
     this.msg=msg
   }

　　

　　  2.  子组件 =》父组件

　　　　　　　　$emit 调用父组件中的方法，并传参

　　　　　　　　　　父组件中：

template代码 将父组件中的changeShowTips 方法传入
<tips
      :msg="msg"
      @changeShowTips="changeShowTips"
      v-show="showTipsFlag"
    ></tips>
js代码
changeShowTips(data) {
      this.showTipsFlag = data;
    },

　　　　　　　　　子组件中：

<div class="myalert">
    {{msg}}
    <a class="close" @click="closeFn">确定</a>
  </div>
js调用 子组件中 利用$emit调用父组件中的方法，并传参
closeFn(){
     this.$emit('changeShowTips',false);
   }

　

2.兄弟组件

 结构： tips和test共同在一个父组件中

在父组件中：定了一个一个fn函数 ，但是fn的处理函数是在$on之后的函数 这里写不管用

fn() {},

　　

在tips.vue中

在mounted 或者其他生命周期函数中，或者事件中 让父组件监听了fn这个函数 后面是他的处理函数 就可以接收到 兄弟组件 通过this.parent.$emit(fn)传来的值

　　//这是兄弟组件触发事件以后的处理函数

this.$parent.$on("fn", function(msg) {
        this.msg = msg;  
这里的msg是兄弟组件传来的值
      });

　　

 test.vue中  有一个可以改变tips组件数据的方法 ，其原理就是通过父组件调用改变方法

changTipsFn() {
      this.$parent.$emit("fn", "123");
    }

　　原理就是 父组件 动态监听了 一个函数fn的调用，当组件a调用了这个fn，则父组件拿到fn的值，并进行处理（改变了组件b的内容），只不过这个过程 父组件并没有直接参与，而是两个子组件，通过this.$parent来实现；

     也可以用this.$root实现

3.祖先和后代

1. 　祖先 =》后代

　　provide / inject 需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

provide   Object | () => Object
inject    Array<string> | { [key: string]: string | Symbol | Object } 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
父组件：

provide() {
    return {
      common: { my_data: this.obj }
// 提示：provide 和 inject 绑定并不是可响应的。是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。这里的obj就是父组件中定义的可响应的数据
    };
  },

　　子组件：

inject: {
    common: {
      default: () => {
        return {my_data: '0'}
      }
    }
  },

使用：
 {{ common.my_data.title }}

2.后代 =》祖先

　　　　　原理：递归查找父组件 通过$emit和$on进行传值

// 定义一个dispatch方法，指定要派发事件名称和数据 
function dispatch(eventName, data) {    let parent = this.$parent   
 // 只要还存在父元素就继续往上查找    
while (parent) {        
  // 父元素用$emit触发        
  parent.$emit(eventName,data)       
   // 递归查找父元素        
  parent = parent.$parent    
  } }
 调用：
// child.vue  子组件嗲用dispatch hello 方法是父组件的 
<h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>
 
 // parent.vue
 this.$on('hello', this.sayHello)
 mounted() {
  // 父组件中监听hello，执行相应的this.sayHello方法 从而试得父组件接收到子组件的数据
    this.$on("hello", this.sayHello);
  },
    sayHello(msg) {
      alert(msg);
    },
    hello(msg) {
      console.log(msg + "触发了父元素的事件"); 并没有打印
    }

　　

每一级的parent我都打印了 

　

 

 　　一般不会这样做

 

4.任意组件

1. ​​vuex​​
2. 事件总线：vue-bus 创建一个Bus类父组事件派发，监听和回调管理

 事件总线：

原理：

在bus这个vue对象中注册foo事件，根据emit源码遍历执行所有名为foo的事件。当我们在b组件emit 分发事件后再a组件注册事件就将被执行 cbs[i].apply(vm, args);，再a组件的参数就将赋值给a组件中的data，根据vue数据绑定原理 此时this.bus的set()方法被触发，遍历bus属性在get()方法中收集到的依赖，并更新依赖，此时数据就从一个vue对象传递到另一个vue对象

　1.　在assets中创建一个bus.js

import Vue from 'vue'
export default new Vue;

　　在需要的组件中引入

import bus from "../assets/bus";

　　事件触发

bus.$emit("foo");
此处 foo 是自定义名称，并没有实际作用；确保需要响应变化的组件 通过监听同名字 从而达到变化的效果

　　需要同步做出改变的组件

mounted() {
    bus.$on("foo", function() {
      console.log("监听到了bus");
    });
  },
监听foo 变化 组件a触发了foo ,组件b监听到foo,从而做出改变 完成任意组件间通信

需要通信的组件都需要引入bus

　2.　手写bus 非通过vue实例的

// Bus：事件派发、监听和回调管理 
class Bus {
  constructor() {

    //{
      //   eventName1:[fn1,fn2],    
      //   eventName2:[fn3,fn4],    
      //
    //}
    this.callbacks = {}
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn)
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach(cb => cb(args))
    }
  }
}

// main.js 
Vue.prototype.$bus = new Bus()

// child1 
this.$bus.$on('foo', handle) // child2 this.$bus.$emit('foo')

 　　

　　补充知识点：

　　　　vm.$emit( event, arg ) //触发当前实例上的事件

　　　　vm.$on( event, fn );//监听event事件后运行 fn；