vue3中一个组件调用另外一个组件的方法
时间: 2023-11-03 13:04:48 浏览: 155
Vue.js组件高级特性实例详解
可以使用Vue的ref属性来获取另一个组件的实例,然后调用该实例的方法。具体做法如下:
首先,在要调用方法的组件中使用ref属性来获取目标组件的引用,在template中添加以下代码:
```
<template>
<target-component ref="target"></target-component>
</template>
```
其中,target-component是要调用方法的组件,ref="target"表示将该组件的引用保存到当前组件的target属性中。
然后,在当前组件的方法中,通过this.$refs.target来获取目标组件的实例,从而调用该实例的方法,示例代码如下:
```
<template>
<button @click="callTargetMethod">调用目标组件的方法</button>
</template>
<script>
export default {
methods: {
callTargetMethod() {
this.$refs.target.targetMethod();
}
}
}
</script>
```
在上面的代码中,callTargetMethod方法通过this.$refs.target来获取目标组件的实例,并调用该实例的targetMethod方法。注意,targetMethod方法必须在目标组件中定义才能调用成功。
阅读全文