Vue 跨级通信

vue 组件之间的跨级通信

1. 概念：Vue2.2.0 新增 API,这对选项须要一块儿使用，以容许一个祖先组件向其全部子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中经过 provider 来提供变量，而后在子孙组件中经过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通讯问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间创建了一种主动提供与依赖注入的关系。

父组件：

<script>
import Children  from '@/components/children.vue'

export default {
  name: 'home',
  components: {
    Children
  },
   provide(){
        return {
            value:"来自app"
        }
  }
}
复制代码

子组件（后代组件）：

<template>
    <div>
       {{value}}
    </div>
</template>

<script>
    export default {
        inject:["value"]
    }
</script>
复制代码

父组件经过provide将value这个变量提供给它的全部的子组件，而子组件经过inject访问这个变量。

须要注意的是：provide 和 inject 绑定并非可响应的。这是刻意为之的。然而，若是你传入了一个可监听的对象，那么其对象的属性仍是可响应的。

因此父组件的value若是改变了，子组件的value是不会改变的。

provide和inject怎么实现数据响应式：

通常来讲，有两种办法：

• provide 祖先组件的实例，而后在子孙组件中注入依赖，这样就能够在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载不少没有必要的东西好比 props，methods
• 使用 2.6 最新 API Vue.observable 优化响应式 provide(推荐)
• 咱们来看个例子：孙组件 D、E 和 F 获取 A 组件传递过来的 color 值，并能实现数据响应式变化，即 A 组件的 color 变化后，组件 D、E、F 不会跟着变（核心代码以下：）

  

// A 组件
<div>
      <h1>A 组件</h1>
      <button @click="() => changeColor()">改变color</button>
      <ChildrenB />
      <ChildrenC />
</div>
......
  data() {
    return {
      color: "blue"
    };
  },
  // provide() {
  //   return {
  //     theme: {
  //       color: this.color //这种方式绑定的数据并非可响应的
  //     } // 即A组件的color变化后，组件D、E、F不会跟着变
  //   };
  // },
  provide() {
    return {
      theme: this//方法一：提供祖先组件的实例
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    }
  }
  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
  // provide() {
  //   this.theme = Vue.observable({
  //     color: "blue"
  //   });
  //   return {
  //     theme: this.theme
  //   };
  // },
  // methods: {
  //   changeColor(color) {
  //     if (color) {
  //       this.theme.color = color;
  //     } else {
  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
  //     }
  //   }
  // }
复制代码

// F 组件
<template functional>
  <div class="border2">
    <h3 :style="{ color: injections.theme.color }">F 组件</h3>
  </div>
</template>
<script>
export default {
  inject: {
    theme: {
      //函数式组件取值不同
      default: () => ({})
    }
  }
};
</script>
复制代码

参考网址：www.cnblogs.com/fundebug/p/…