vue.js 非父子通信-provide-inject

在Vue.js中，通常情况下，父组件与子组件之间的通信是通过props和$emit来实现的。但当组件之间的嵌套层级非常深，或者需要在多个组件之间共享数据时，使用props和$emit会变得非常繁琐。Vue.js提供了provide和inject这两个API来解决这个问题。

provide和inject是一对成对出现的，父组件通过provide来提供数据，子组件通过inject来注入数据。provide和inject能够实现非父子组件之间的通信，并且不受嵌套层级的限制。

下面是一个详细的使用provide和inject的示例：

父组件中使用provide提供数据：

<template>
  <div>
    <h1>Parent Component</h1>
    <p>Message: {{ message }}</p>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from parent component'
    };
  }
};
</script>

子组件中使用inject注入数据：

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message: {{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return this.message;
    }
  }
};
</script>

在子组件中，使用inject选项来声明要注入的属性，这里我们声明了message属性。然后在computed属性中可以通过this.message来访问到父组件提供的数据。

通过provide和inject，父组件提供的数据可以被所有直接或间接的子组件访问到。这样就实现了非父子通信。

需要注意的是，provide和inject不是响应式的。也就是说，如果父组件的provide提供的数据发生变化，子组件不会自动更新。如果需要实现响应式，可以通过结合Vue的响应式系统来实现，例如使用vuex或者使用另外一个Vue实例作为数据中心。