Vue组件通讯方式 provide/inject 介绍以及使用场景

vue的通讯方式

父子组件：父传子prop，子通知父 emit，【$root，$parent，$children】

非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref

子组件实例可以用 this.$parent 访问父实例，子实例被存储父组件实例的 $children 数组中。但是这种只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

高阶插件/组件库: provide / inject (Vue2.2.0)

允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。也就是说，在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。。

provide / inject的缺点

官网不建议在应用中直接使用该办法，理由很直接：他怕你"管不好"。设计项目，通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护，然而这对选项支持任意层级都能访问，导致数据追踪比较困难。不知道那一层级声明了provide又或是哪些层级使用了inject。造成比较大的维护成本。因此，除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。

使用办法

provide 提供变量

Object | () => Object
provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。

inject 注入变量

Array<string> | { [key: string]: string | Symbol | Object }
inject 选项可以是

• 一个字符串数组
• 一个对象，key为本地绑定名，value为：在可用的注入内容中搜索用的key
• 一个对象，其 from 属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value
  提示：provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。

代码案例展示一（provide字符串）

在父组件中provide提供变量

<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量, 提供变量是纯字符串的，可以以provide: {} 的形式书写
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

在子组件中，我们不使用任何父组件的信息

<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from "./grandSon "
export default {
  name: "Son",
  components: { grandSon },
  data () {
    return {
      title: '子组件'
    }
  },
};
</script>

在孙组件中，使用inject来注入

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

结果孙组件页面显示：

message: provided by father

代码案例展示二（provide返回一个方法，并且方法返回字符串）

父组件

export default {
  // 这里改为提供一个方法
  provide() {
    return {
      getTestData: this.getTestData
    }
  },
  data () {
    return {
      testData: null
    }
  },
  methods: {
    // 方法中返回testData
    getTestData() {
      return this.testData
    }
  },
  components: {
    child
  },
  created() {
    this.testData = {
      name: 'hello'
    }
  }
}

子组件

export default {
  // 在子组件中注入这个方法
  inject: ['getTestData'],
  created() {
    console.log(this.getTestData())
  }
}

若父组件的provide改成以下两种形式，子组件获取的注入值为null，没办法获取到实时的变量值，只获取到data第一次的初始值

provide() {
return {
	testData: this.testData
  }
}

或者

  provide: {
	testData: this.testData
 },