vue3中父组件怎么在script中获取子组件传递过来的数据
时间: 2023-08-18 12:54:46 浏览: 55
在 Vue 3 中,可以使用 `ref` 和 `provide/inject` 来实现父组件获取子组件传递的数据。
一种常用的方法是使用 `ref` ,它可以将数据包装在一个响应式引用中,以便在父组件中进行访问。在子组件中,可以使用 `emits` 属性将数据发送给父组件。
下面是一个示例代码:
```vue
<template>
<div>
<ChildComponent @data-updated="updateData"></ChildComponent>
<p>Received data: {{ receivedData }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const receivedData = ref('');
const updateData = (data) => {
receivedData.value = data;
};
return {
receivedData,
updateData
};
}
};
</script>
```
在上面的示例中,父组件通过监听子组件的 `data-updated` 事件来接收子组件传递的数据,并将其存储在 `receivedData` 引用中。
另一种方法是使用 `provide/inject` 。父组件通过 `provide` 方法提供数据,而子组件通过 `inject` 方法来接收数据。下面是一个示例代码:
```vue
// 父组件
<template>
<div>
<ChildComponent></ChildComponent>
<p>Received data: {{ receivedData }}</p>
</div>
</template>
<script>
import { provide, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const receivedData = reactive({
data: ''
});
provide('data', receivedData);
return {
receivedData
};
}
};
</script>
// 子组件
<template>
<div>
<button @click="updateData">Update Data</button>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const data = inject('data');
const updateData = () => {
data.data = 'New Data';
};
return {
updateData
};
}
};
</script>
```
在上述示例中,父组件通过 `provide` 方法提供了一个名为 `'data'` 的数据对象,并在子组件中使用 `inject` 方法来接收该数据对象。子组件可以直接修改该数据对象,并在父组件中进行相应的更新。
这些是在 Vue 3 中从父组件获取子组件传递数据的两种常用方法。希望能对你有所帮助!