父组件接受子组件传递的数据
时间: 2024-06-16 08:08:09 浏览: 12
当子组件需要将数据传递给父组件时,可以通过在子组件中定义一个自定义事件,并通过 $emit()$ 方法触发该事件,然后在父组件中通过 $v-on$ 指令监听该事件并处理传递的数据。具体步骤如下:
1. 在子组件中定义一个自定义事件,例如 $my-event$:
```vue
<template>
<button @click="$emit('my-event', 'hello world')">传递数据</button>
</template>
```
上述代码表示在点击按钮时触发一个名为 $my-event$ 的自定义事件,并将字符串 "hello world" 作为参数传递给该事件。
2. 在父组件中监听该自定义事件并处理传递的数据:
```vue
<template>
<div>
<my-component @my-event="handleMyEvent"></my-component>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
handleMyEvent(data) {
this.message = data
}
}
}
</script>
```
上述代码表示在父组件中使用 $v-on$ 指令监听名为 $my-event$ 的自定义事件,并将回调函数 $handleMyEvent$ 注册为事件处理函数。当子组件触发 $my-event$ 事件时,父组件的 $handleMyEvent$ 方法会被调用,并将子组件传递的数据作为参数传入。