上面的代码和我的另一个项目都可以正常运行;
但我现在的这个项目中这样使用就不行, console.log(value);
只会触发一次;
需要修改为这样才行:
const PropsData = defineProps<Props>();
const { value } = toRefs(PropsData);
这是为什么?是什么影响的?
版本都是 vue:3.3.4
上面的代码和我的另一个项目都可以正常运行;
但我现在的这个项目中这样使用就不行, console.log(value);
只会触发一次;
需要修改为这样才行:
const PropsData = defineProps<Props>();
const { value } = toRefs(PropsData);
这是为什么?是什么影响的?
版本都是 vue:3.3.4
这个问题涉及到 Vue 3 的 Composition API,特别是 defineExpose
和 toRefs
的使用。
在 Vue 3 中,我们通常使用 defineExpose
来暴露一个组件的属性或方法给父组件。然而,defineExpose
的默认行为是只暴露那些显式通过 defineProps
或 defineEmits
定义的属性或方法。如果你没有使用 defineProps
或 defineEmits
,那么 defineExpose
就无法获取到那些属性或方法。
在你的例子中,你在 Props
类型中定义了 value
,但是你没有使用 defineProps
或 defineEmits
,所以 PropsData
没有 value
这个属性。因此,当你尝试 console.log(PropsData.value)
时,你得到的是 undefined
。
当你改为下面的代码后,你使用了 defineProps<Props>()
,这样 PropsData
就有了 value
这个属性。
const PropsData = defineProps<Props>();
const { value } = toRefs(PropsData);
然后,你可以通过 value
这个变量来访问 PropsData.value
。同时,由于 toRefs
是从 ref
和 reactive
创建的对象的可读响应式引用,所以你可以用它来读取和监听 PropsData.value
的变化。
所以,如果你想在组件内部使用 Composition API 定义的 props,你需要显式地使用 defineProps
或 defineEmits
。
5 回答1.4k 阅读
4 回答1.3k 阅读✓ 已解决
3 回答2.6k 阅读✓ 已解决
5 回答1.5k 阅读✓ 已解决
2 回答1.6k 阅读✓ 已解决
1 回答1k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决