vue 父组件接收子组件
时间: 2023-08-29 11:07:10 浏览: 48
在 Vue 中,父组件可以通过 props 属性接收子组件传递的数据。下面是一个简单的示例:
```vue
<!-- 子组件:ChildComponent.vue -->
<template>
<div>
<button @click="sendData">传递数据给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('data', 'Hello from child component');
}
}
}
</script>
```
```vue
<!-- 父组件:ParentComponent.vue -->
<template>
<div>
<child-component @data="handleData"></child-component>
<p>父组件接收到的数据:{{ receivedData }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedData: ''
}
},
methods: {
handleData(data) {
this.receivedData = data;
}
}
}
</script>
```
在上面的例子中,子组件通过 `this.$emit` 方法触发一个名为 `data` 的自定义事件,并传递了一个字符串作为参数。在父组件中,我们使用 `@data` 监听子组件触发的 `data` 事件,然后调用 `handleData` 方法来接收子组件传递的数据,并将其存储在 `receivedData` 变量中。最后,在父组件的模板中,我们可以使用插值语法 `{{ receivedData }}` 来显示接收到的数据。
这样,父组件就可以接收并处理来自子组件的数据了。当子组件中点击按钮时,父组件会更新 `receivedData` 并显示在页面上。