vue 父子组件传递数据的几种方式 props，$emit, eventbus, provide/inject

1：常用的是props和$emit的方式来处理，也是最常用的方式

    a:父组件传值到子组件

父组件
<parent>
    <child :message="msg"></child>
</parent>

data(){
    return {
        msg: "this is parent message"
    }
}

子组件

<div>
    <p>{{message}}</p>
</div>

data(){
    //两种方式都可以
    //props:["message"]
    props:
        message: {
            type: String,                 //可指定接收类型，如:Array.
            default:"this is default"     //可设置默认值
        }
    }
}

   b:父组件传值到子组件

子组件
<template>
    <button @click='setValue'>setValue</button>
</template>

data(){
    return {
        value: "sendValue"
    }
},
methods:{
    setValue:function(){ 
        this.$emit('getdata',this.value); //this.value为向父组件传递的数据
    }
}
父组件
<div id="app">
    <child @getdata="receive" ></child> //自动监听由子组件"注册"的 'getdata'事件,然后调用receive方法来更改数据
    <p>{{value}}</p>
</div>

data(){
    return{
        value:"default"
    }
  },
methods: {
    receive:function(val) {
        this.value = val;
    }
}

PS：以上的方式只能用于父子组件之间的传值，如果是父组件传递给孙子组件的话，那么就需要父组件吧值传递给子组件，然后通过子组件吧值传递给孙子组件，反之也是这样

2:非父子组件之间的通讯

      a: 在简单的场景之下，我们可以通过使用一个空的vue实例来做一个中转站来进行数据的发送和接受

创建一个中转文件  event.js
import Vue from 'vue'
var bus = new Vue()     //创建事件"中转站"
export default bus

a.vue
<button @click="btnclick">content</button >
// 触发组件 A 中的事件
import eventdata from '../event.js'
methods: {
    btnclick(){
        eventdata.$emit('transfer',this.message);  
    }
}

b.vue
// 在组件B监听事件
<template>
    <div>{{message}}</div>
</template>
import eventdata from '.../event.js'
data(){
    return{
       message:"default"
    }
},
created() {
    eventdata.$on('transfer', function(msg){     //接收事件
        this.message = 'msg';
    });
}

    b : vuex  但是这种方式就暂时不贴代码了

3:provide/inject  

      这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。也就是说，在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法  

   缺点：官网不建议在应用中直接使用该办法，理由很直接：他怕你"管不好"

 

 PS：provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。 

 

• provide 提供变量：Object | () => Object  
• inject 注入变量： Array<string> | { [key: string]: string | Symbol | Object 
• provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。

• inject 选项可以是

• 一个字符串数组
• 一个对象，key为本地绑定名，value为：
  • 在可用的注入内容中搜索用的key，或
  • 一个对象，其 from 属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value

父组件
<template>
  <div>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量  两种方式
    //provide: {
    //  message: this.title,
    //  message1:'asdafdsd'
    //},
    provide () {
      return { TabsInstance: this };
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>
子组件不接受任何父组件的数据
孙子组件
<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

provide给数据，inject接受数