vue点击父组件的事件,调用子组件的事件
时间: 2023-06-21 10:13:07 浏览: 33
可以通过在父组件中使用 `$refs` 来调用子组件的方法。具体步骤如下:
1. 在子组件中定义一个方法,供父组件调用:
```vue
<template>
<div>
<!-- 子组件内容 -->
</div>
</template>
<script>
export default {
methods: {
childMethod() {
// 子组件方法逻辑
}
}
}
</script>
```
2. 在父组件中引入子组件,并在父组件中定义一个方法,通过 `$refs` 调用子组件的方法:
```vue
<template>
<div>
<button @click="callChildMethod">点击调用子组件方法</button>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.child.childMethod()
}
}
}
</script>
```
在父组件中使用 `ref` 给子组件命名,然后通过 `this.$refs.child` 获取到子组件实例,进而调用子组件中的方法。