vue3 reactive props传值接收不到
时间: 2023-09-15 11:02:56 浏览: 232
【JavaScript源代码】vue3 父子组件传值详解.docx
在Vue 3中,使用`reactive`函数创建的响应式对象是无法直接作为组件的属性(props)来传递的。这是因为`reactive`函数会将对象转化为响应式对象,而组件的props是不可改变的。
如果想要在组件中接收响应式props值,可以考虑使用`toRef`或`toRefs`函数来创建一个`ref`对象,然后将这个`ref`对象作为组件的props来传递。
例如,如果有一个父组件想要将一个响应式的对象`user`传递给子组件,可以这样写:
```javascript
// 父组件
<template>
<div>
<ChildComponent :user="userRef"/>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const user = reactive({
name: 'John',
age: 25
});
const userRef = toRefs(user);
return {
userRef
}
}
}
</script>
```
然后,在子组件中,可以像使用普通的props一样访问`user`这个响应式props对象的属性:
```javascript
// 子组件
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true
}
}
}
</script>
```
通过使用`toRefs`函数,将父组件传递的响应式对象`user`转化为了可在子组件中直接访问的响应式属性。这样就能够正确地接收到响应式props值了。
阅读全文