Vue中inject与provide的用法

provide/inject提供了一种新的组件间通信的方法。它允许父组件向子孙组件间进行跨层级的数据分发，但是provide/inject是非响应式的。一般用于子组件调用父组件的共有方法。它们两个需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

实例如下：

Test.vue：

<template>
  <div class="about">
    <h1>我是父组件:{{msg}}</h1>
    <button @click="changeMsg">点位改变</button>
    <test2></test2>
  </div>
</template>

<script>
import test2 from "./Test2";
export default {
  name: "Test",
  data() {
    return {
      msg: "你好啊"
    };
  },
  //给子组件传递数据和方法
  provide() {
    return {
      msg: this.msg,
      messageBox: this.messageBox
      
    };
  },
  components: {
    test2
  },
  methods: {
    changeMsg() {
      this.msg = "今天天气转暖";
    },
    messageBox(msg){
      alert(msg)
    }
  }
};
</script>

<style>
</style>

Test2.vue：

<template>
  <div><h3>我是子组件</h3>{{msg}}
  <button @click="message">我要执行父组件的方法</button>
  </div>
</template>

<script>
export default {
    name:'Test2',
    //接收父组件的数据
    inject:['msg','messageBox'],
    methods:{
        message(){
            this.messageBox('我是子组件')
        }
    }
   
}
</script>

<style>

</style>

当点击父组件中的按钮时，父组件中的msg已经改变，但是子组件中接收的数据并未发生变化。这就说明这种方式共享数据不是响应式的，一般不使用这种方式传递数据。
当点击子组件中的按钮时，会执行父组件的messageBox方法，是推荐的用法。