vue provide inject vue依赖注入 vue跨多组件通讯

vue进阶实战课目录

provide inject跨多组件通讯

ref和$parent / $children` 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 这样的解决方案，不得不引入三方库来支持。本次介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

vue的组件传值常用三种方式，1.prop传值2.$parent / $children传值3.provide inject

注意！provide和inject只能传值或提供方法给子组件，子组件不能调用父组件方法和数据！！例如 父组件的provide 子组件都能获取到，但子组件provide 父组件是拿不到的。

<!--  -->
<template>
  <div>
    <div class="alert alert-primary" v-show="show">
      消息提示
    </div>
    <div class="btn btn-primary" @click="rename(123)">edit children</div>
    <demo></demo>
  </div>
</template>


<script>
  import demo from './demo-item.vue';
  export default {
    // 无法获取子组件方法和数据
    inject:['title','rename'],
    provide() {
      return {
        show: this.show,
        showHide: this.showHide
      }
    },
    components: {
      demo
    },
    data() {
      return {
        show: false
      };
    },
    methods: {
		showHide(data){
			this.show = data
		}
    },
    watch: {

    },
    computed: {

    },
    created() {
    console.log(this.title)
    },
    mounted() {

    }


  };
</script>
<style>

</style>

子组件

<!--  -->
<template>
  <div>
    <h5>{{title}}</h5>
    <button class="btn btn-danger" @click="showHide(true)">
    	显示main组件里的消息提示框
    </button>
    <button class="btn btn-warning" @click="showHide(false)">
    	隐藏main组件里的消息提示框
    </button>
  </div>
</template>

<script>
  export default {
    inject:['show','showHide'],
    provide(){
      return {
        title:this.title,
        rename:this.rename
      }
    },
    components: {},
    data() {
      return {
        title: "我是父组件的标题"
      };
    },
    methods: {
      rename(data) {
        this.title = data
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      // console.log(this.show)
    },
    mounted() {

    }


  };
</script>
<style>

</style>

代码