Vue 2.7 中使用 provide/inject 及响应式监听传递数据

Vue 2.7 中，provide/inject 可以用于在父组件中向子组件传递数据。provide 提供一个对象，该对象中的属性将会被注入到子组件中，而 inject 接收一个数组，该数组中的元素是父组件提供的属性名称。

提供的数据可以是任何类型，包括对象和函数。在子组件中，使用 inject 获取父组件提供的数据，也可以使用响应式监听来监听这些数据的变化。

例如，假设有一个父组件 App 和一个子组件 Child，我们可以在 App 中提供一个名为 message 的属性，并在 Child 中使用 inject 获取该属性，并使用响应式监听来监听其变化：

<template>
  <div>
    <Child></Child>
  </div>
</template>

<script>
  import Child from './Child.vue';

  export default {
    provide() {
      return {
        message: 'Hello, World!'
      };
    },
    components: {
      Child
    }
  };
</script>

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

<script>
  export default {
    inject: ['message'],
    data() {
      return {
        localMessage: this.message
      };
    },
    created() {
      this.$watch('message', (newVal, oldVal) => {
        this.localMessage = newVal;
      });
    }
  };
</script>

在上面的例子中，我们使用 provide 方法在 App 组件中提供了一个名为 message 的属性，并在 Child 组件中使用 inject 方法获取了该属性。在 Child 组件中，我们将 message 属性的值赋给了一个名为 localMessage 的局部变量，并使用 $watch 方法监听 message 的变化，一旦 message 发生变化，就将新的值赋给 localMessage。

需要注意的是，在使用 provide/inject 时，父组件提供的数据不会随着其自身的数据变化而响应式更新，因此需要手动监听。