vue 父组件调用子组件方法
时间: 2023-11-03 13:02:40 浏览: 205
vue 父组件中调用子组件函数的方法
5星 · 资源好评率100%
要让父组件调用子组件的方法,可以使用 `ref` 属性来获取子组件的实例,然后通过该实例调用子组件的方法。
假设有一个父组件 `Parent` 和一个子组件 `Child`,子组件中有一个名为 `childMethod` 的方法,可以这样实现父组件调用子组件的方法:
```html
<template>
<div>
<Child ref="childRef"></Child>
<button @click="callChildMethod">调用子组件的方法</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
callChildMethod() {
// 通过 $refs 获取子组件实例
const childInstance = this.$refs.childRef
// 调用子组件的方法
childInstance.childMethod()
}
}
}
</script>
```
在子组件中,需要在 `export default` 中添加 `methods` 属性,并在其中定义需要暴露给父组件的方法。
更多关于 `ref` 的使用,可以参考官方文档:https://cn.vuejs.org/v2/api/#ref
阅读全文