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方法，是推荐的用法。