在渲染函数中向下传递时，prop 不是反应性的答案

【问题标题】：prop is not reactive when passed down in render function在渲染函数中向下传递时，prop 不是反应性的
【发布时间】：2023-02-09 03:22:21
【问题描述】：

在上面的复制器中，我希望孩子的行为方式与父母相同。

我正在尝试通过渲染函数将道具传递给子组件。

const submitting = ref('...');
return () => h(ChildComponent, { loading: submitting.value });

但是，它们不是反应性的。我阅读了关于渲染函数的 vuejs docs，但无法找出我做错了什么。显然我错过了一些东西......它是什么？

【问题讨论】：

【解决方案1】：

您可以使用 toRefs 使您的道具具有反应性。像这样

import { toRefs } from 'vue'

const props = defineProps({
   isReactive: Boolean
})

const { isReactive } = toRefs(props) // this is reactive

因此，您的子组件可以使用 reactive prop 执行任何操作，因为它会监听父组件的更新。

【讨论】：