vue2如何调用子组件中的方法
时间: 2024-06-13 19:06:37 浏览: 80
在Vue2中,可以通过给子组件定义ref属性来调用子组件中的方法。具体步骤如下:
1. 在子组件中定义一个ref属性,例如:ref="childComponent"。
2. 在父组件中通过$refs来访问子组件的方法,例如:this.$refs.childComponent.methodName()。
下面是一个示例代码:
子组件:
```vue
<template>
<div>
<button @click="childMethod">调用子组件方法</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('子组件方法被调用了')
}
}
}
</script>
```
父组件:
```vue
<template>
<div>
<child-component ref="childComponent"></child-component>
<button @click="parentMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
parentMethod() {
this.$refs.childComponent.childMethod()
}
}
}
</script>
```
在上面的代码中,子组件中定义了一个名为childMethod的方法,父组件中通过$refs来访问子组件的方法,并在parentMethod方法中调用了子组件的childMethod方法。
阅读全文
相关推荐

















