一、vue2 实现响应式后代传参
- 在父组件中通过 provide 选项式 API 定义向后代组件传递的响应式参数
<template>
<div>
<h1>App</h1>
<HomeView></HomeView>
</div>
</template>
<script>
import HomeView from "@/views/HomeView.vue";
export default {
components: {
HomeView,
},
data() {
return {
count: 1,
};
},
mounted() {
setInterval(() => {
this.count++;
}, 1000);
},
provide() {
return {
count: () => this.count,
};
},
};
</script>
- 在后代组件中通过 inject 选项式 API 接收父组件传递的响应式参数
<template>
<div>
<h1>main</h1>
<div>{{ countFromParent }}</div>
</div>
</template>
<script>
export default {
computed: {
countFromParent() {
return this.count() + 100;
},
},
inject: ["count"],
};
</script>
二、vue3 实现响应式后代传参
- 在父组件中通过 provide() 组合式 API 定义向后代组件传递的响应式参数
如果不希望后代组件修改 provide() 组合式 API 定义的参数，可以通过 readonly() 函数包装传递的数据
<template>
<h1>APP</h1>
<HomeView></HomeView>
</template>
<script setup>
import HomeView from "@/views/HomeView.vue";
import { provide, readonly, ref } from "vue";
const count = ref(1);
provide("countKey", readonly(count));
setInterval(() => {
count.value++;
}, 1000);
</script>
- 在子组件中通过 inject() 接收父组件传递的响应式参数
<template>
<h2>main</h2>
<div>{{ countFromParent }}</div>
</template>
<script setup>
import { inject } from "vue";
const countFromParent = inject("countKey");
// 如果父组件不使用 readonly 包装参数，那么后代组件可以改变父组件传递的参数
/* setInterval(() => {
countFromParent.value += 100
}, 1000) */
</script>
