作用:实现祖孙组件间通信
套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据
具体代码如下:
1. 祖组件中:
<template>
<div>我的祖组件{{ car }}</div>
<button @click="car.money++">祖组件按钮</button>
<hr />
<ChildC />
</template>
<script>
import ChildC from './components/ChildC'
import {reactive, provide} from 'vue';
export default {
name: 'App',
components: { ChildC },
setup() {
const car = reactive({
money: 10,
name: 'car'
})
provide('car', car)
return {
car
}
}
}
</script>
2. 后代组件中:
<!-- 实现输入框输入内容后,在输入框下的div过2秒显示 -->
<template>
{{ car }}
<div>
<button @click="car.money++">改变祖组件</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'SonC',
setup() {
const car = inject('car')
return {
car
}
}
}
</script>
Vue3:provide和inject实现祖组件和后代组件通信
最新推荐文章于 2024-05-22 15:24:23 发布