- 使用自定义事件:在子元素中定义一个自定义事件,当需要调用该方法时,通过触发该事件来传递给父元素。
父元素可以通过监听该事件并调用相应的方法来响应。例如:
<!-- 子组件 -->
<template>
<button @click="emitMethod">点击我</button>
</template>
<script>
export default {
methods: {
emitMethod() {
this.$emit('child-method');
}
}
}
</script>
<!-- 父组件 -->
<template>
<child-component @child-method="parentMethod"></child-component>
</template>
<script>
export default {
methods: {
parentMethod() {
// 父元素的方法逻辑
}
}
}
</script>
- 使用ref引用:在父元素中使用ref来引用子元素,并通过this.$refs来获取子元素的实例,从而可以直接调用子元素的方法。例如:
<!-- 子组件 -->
<template>
<button @click="childMethod">点击我</button>
</template>
<script>
export default {
methods: {
childMethod() {
// 子元素的方法逻辑
}
}
}
</script>
<!-- 父组件 -->
<template>
<child-component ref="childRef"></child-component>
</template>
<script>
export default {
mounted() {
// 直接调用子元素的方法
this.$refs.childRef.childMethod();
}
}
</script>