Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录vue的通讯方式provide / inject的缺点使用办法代码案例展示一(provide字符串)代码案例展示二(provide返回一个方法,并且方法返回字符串)vue的通讯方式父子组件:父传子prop,子通知父 emit,【root,root,root,parent,$children】非父子组件:Vuex实现,父子层层传递、中央事务总线Bus,$ref子组件实例可以用 this.$p
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: {
// 方法中返回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
},
更多推荐
所有评论(0)