父组件获取子组件事件
时间: 2023-11-25 10:06:07 浏览: 21
父组件可以通过$refs来获取子组件实例,然后通过$emit方法触发子组件的事件。以下是一个示例代码:
```html
<template>
<div>
<child ref="child"></child>
<button @click="emitEvent">触发子组件事件</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
emitEvent() {
this.$refs.child.$emit('child-event', '这是传递给子组件的数据')
}
}
}
</script>
```
在上面的代码中,父组件通过$refs获取到子组件实例,然后在emitEvent方法中通过$emit方法触发了子组件的事件,并传递了一个字符串参数。
子组件可以通过$on方法来监听这个事件,以下是一个示例代码:
```html
<template>
<div>
<h2>子组件</h2>
</div>
</template>
<script>
export default {
mounted() {
this.$on('child-event', (data) => {
console.log('子组件接收到事件,数据为:', data)
})
}
}
</script>
```
在上面的代码中,子组件通过$on方法来监听父组件传递过来的事件,并在回调函数中打印出传递过来的数据。