在Vue中,provide 和 inject 是用来实现祖先组件向子孙组件传递数据的一种高级组件通信方式。provide 可以在祖先组件中定义数据,而 inject 可以在子孙组件中接收这些数据。这种传递方式不受组件层级限制,非常适合于跨多层级的组件通信。
用法案例
父级组件
<template>
<div>
<div>我是父级组件</div>
<Child/>
</div>
</template>
<script>
import Child from './child.vue'
export default {
components: {
Child
},
data() {
return {
message:'父组件信息'
}
},
provide() {
return { $_parent: this };
},
methods:{
getMessage(){
alert('message')
}
}
}
</script>
<style></style>
child组件
<template>
<div>
<button @click="getInfo">获取父组件信息</div>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
}
},
inject: ['$_parent'],
methods:{
getInfo(){
console.log(this.$_parent.message)
this.$_parent.getMessage()
}
}
}
</script>
<style></style>