vue父组件调子组件事件
时间: 2023-11-24 07:51:30 浏览: 31
在Vue中,父组件可以通过`$refs`访问子组件实例,并且可以使用`$emit`方法触发子组件上的事件。具体步骤如下:
1. 在子组件中定义一个事件,例如`childEvent`:
```javascript
// 子组件
<template>
<div>
<button @click="handleClick">点击触发子组件事件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('childEvent', '子组件传递的参数');
}
}
}
</script>
```
2. 在父组件中引用子组件,并使用`$refs`获取子组件实例:
```javascript
// 父组件
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
export default {
mounted() {
// 获取子组件实例
const child = this.$refs.child;
// 触发子组件事件
child.$emit('childEvent', '父组件传递的参数');
}
}
</script>
```
在上述代码中,我们在父组件的`mounted`钩子函数中获取子组件实例,并使用`$emit`方法触发子组件上的`childEvent`事件,并传递了一个参数。