Vue多层组件之间数据通信

1.通过全局事件总线来通信：

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  //安装全局事件总线，就是在创建之前，给Vue实例添加一个对象，并将Vue实例赋值给这个对象，使这个对象可以作为Vue实例使用
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

组件发送数据：

<template>
<div>
<!--  这个子组件是用来发送数据的-->
<!--  将点击事件绑定到方法，方法中出发一个自定义事件，这个自定义事件是绑定在事件总线上的-->
  <button type="button" @click="sendData">传递数据</button>
</div>
</template>
 
<script>
export default {
  data(){
    return {
      name:'s_com1'
    }
  },
  methods:{
    sendData(){
      //这个事件名为send的事件是绑定在事件总线上的，在这个子组件上触发之后，实现了提供数据的功能
      this.$bus.$emit('send',this.name)
    }
  }
}
</script>
 
<style scoped>
 
</style>

组件接收：

<template>
<div>
<!--  这个子组件是用来接受数据的-->
{{count}}
</div>
</template>
 
<script>
export default {
  data(){
    return {
      count:''
    }
  },
  mounted() {
    //在这个子组件中，同样使用事件总线绑定了一个事件，事件名就是发送数据的自定义事件名
    //这个绑定事件的语句要写在mounted(钩子函数)内，表示在执行方法之前，首先执行钩子函数中的内容
    //在这个钩子函数中绑定了这个自定义事件，就可以接收到来自这个定义事件所发送的数据
    //数据的接受使用的是一个方法接受
    this.$bus.$on('send',this.test)
  },
  methods:{
    //接收数据的方法，方法中的形参就是接收到的来自其他组件的数据
    //在方法内部可以对数据进行逻辑操作，这里只是简单的将数据存储到组件中的数据中进行展示而已
    test(data){
      this.count = data
    }
  }
}
</script>
 
<style scoped>
 
</style>

2.$attrs / $listeners（多层嵌套组件传递数据或者方法）

使用过程中，如果有存在中间的组件截取了props，那么这个值将不会继续向下传递。相反传递给父元素则没有这个问题。

// parent组件
<template>
  <div>
    // 注意：不仅可以向后代组件传递数据，还可以传递方法
    <Item :message="msg" :click-function="clickFunction" @getMsg="getMsg"></Item>
  </div>
</template>
<script>
import Item from './components/Son.vue';
export default {
  components: {Item},
  data () {
    return {
      msg: 'parent组件的数据'
    };
  },
  methods: {
    clickFunction () {
      return '返回个啥呢';
    },
    getMsg(val){
      console.log(val)
    }
  }
};
</script>

// 子组件
<template>
  <div>
    // $props监听数据，$listeners监听方法
    <Child v-bind="$attrs" v-on="$listeners" />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {Child},
  // 注意：这里的props声明什么，就可以传递给后代组件什么
  props: {
    message: {
      type: String,
      default: ''
    },
    clickFunction: {
      type: Function,
      default: () => {}
    }
  }
};
</script>

// 孙子组件
<template>
  <div>
    {{message}}
    <el-button @click="handleClick">点击</el-button>
  </div>
</template>
<script>

export default {
  props: {
    message: {
      type: String,
      default: ''
    },
    clickFunction: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleClick () {
      let res = this.clickFunction();
      console.log(res);
      this.$emit('getMsg','传递')
    }
  }
};
</script>

3.provider和inject，传递响应式：

provider(){
    return {
        obj:this.obj, //通过浅拷贝达到响应式
        message:()=>this.message //用函数的形式返回一个响应式数据
    }
}
 
inject:["obj","message"] //这里message不再是变量而是函数，使用时要加小括号，调用函数，可配合计算属性使用