vue3中父传子用ref
时间: 2024-02-20 19:55:10 浏览: 75
vue 使用ref 让父组件调用子组件的方法
5星 · 资源好评率100%
在Vue 3中,可以使用`ref`来实现父组件向子组件传递数据。`ref`是Vue 3中的一个新特性,它可以用来创建一个响应式的引用对象。
首先,在父组件中,你可以使用`ref`来创建一个响应式的数据对象。例如,你可以创建一个名为`message`的`ref`对象,并将其传递给子组件:
```javascript
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello from parent');
return {
message
};
}
}
```
然后,在子组件中,你可以通过接收父组件传递的`ref`对象来获取数据。例如,你可以在子组件的`props`中声明一个名为`message`的属性,并将其类型设置为`ref`:
```javascript
import { defineProps } from 'vue';
export default {
props: {
message: {
type: Object,
required: true
}
},
setup(props) {
// 使用props.message.value来获取父组件传递的数据
console.log(props.message.value);
return {};
}
}
```
这样,父组件中的`message`数据就可以通过`ref`对象传递给子组件,并且在子组件中可以通过`props.message.value`来获取。
阅读全文