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

文章目录

vue的通讯方式
provide / inject的缺点
使用办法
代码案例展示一（provide字符串）
代码案例展示二（provide返回一个方法，并且方法返回字符串）

vue的通讯方式

父子组件：父传子prop，子通知父 emit，【 r o o t ， root， 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: {// 方法中返回testDatagetTestData() {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},