组件通信
provide/inject
- 一对使用
- 父组件通过provide提供数据
- 子组件通过inject注入值
- 非响应式,可通过对象内属性的方式进行修改
- 解决深层次组件通信
举例:
在app组件下引入son1组件,son1组件引入son2,son2引入son3.这时候我们一般会通过props逐层传递,也可以直接通过provide/inject,直接从app把数据传给传给son3。
代码如下:
App.vue
<template>
<div>
<son1></son1>
<hr>
{{text}}
<button @click="text='改变后的数据'">改变值</button>
</div>
</template>
<script>
import son1 from '../components/son1'
export default {
data() {
return {
text:'测试数据',
}
},
provide(){
return {
text:this.text
}
},
components:{
son1
}
}
</script>
<style lang="scss">
</style>
son1.vue
<template>
<div>
<son2></son2>
</div>
</template>
<script>
import son2 from '../components/son2'
export default {
name: "son1",
components:{
son2
}
}
</script>
<style scoped>
</style>
son2.vue
<template>
<div>
<son3></son3>
</div>
</template>
<script>
import son3 from '../components/son3'
export default {
name: "son2",
components:{
son3
}
}
</script>
<style scoped>
</style>
son3.vue
<template>
<div>
来自App的数据:{{text}}
</div>
</template>
<script>
export default {
name: "son3",
inject:['text']
}
</script>
<style scoped>
</style>
效果图:
但是这种方式传值有个问题,就是从App传递的数据是非响应式的。当我们改变App.vue里面的text这个变量的时候,传递给son3的数据并不会发生变化。
遇到这中问题,可以通过把传递的值变成一个对象的形式进行传递。
App.vue
<template>
<div>
<son1></son1>
<hr>
{{text}}
<button @click="text='改变后的数据'">改变值</button>
<br>
{{obj.text}}
<button @click="obj.text='改变后的响应数据'">改变响应数据的值</button>
</div>
</template>
<script>
import son1 from '../components/son1'
export default {
data() {
return {
text:'测试数据',
obj:{
text:'响应的测试数据',
}
}
},
provide(){
return {
text:this.text,
obj:this.obj
}
},
components:{
son1
}
}
</script>
<style lang="scss">
</style>
son3.vue
<template>
<div>
<div>
来自App的数据:{{ text }}
</div>
<div>
来自App的响应数据:{{ obj.text }}
</div>
</div>
</template>
<script>
export default {
name: "son3",
inject: ['text', 'obj']
}
</script>
<style scoped>
</style>
效果图:
如果在son2中使用了 provide,变量名一直,则会覆盖。
<template>
<div>
<son3></son3>
</div>
</template>
<script>
import son3 from '../components/son3'
export default {
name: "son2",
provide() {
return {
text:'son2中的测试数据'
}
},
components: {
son3
}
}
</script>
<style scoped>
</style>
如图:
总结:
- provide/inject成对使用,是为了解决深层次组件通信的,如果需要响应式,可以通过对象内属性的方式。
- 子组件同名的情况,更近的覆盖。
- 可作为多个较大的父组件,来向下传播唯一值。
父组件:
provide(){
return {
text:this.text,
obj:this.obj
}
},
子组件:
inject: ['text', 'obj']