vue父组件调用子组件方法
vue父组件调用子组件方法
vue父组件调用子组件方法
用户906389531
2023年11月07日
|
浏览 141
在Vue中，父组件可以通过使用ref来获取子组件的实例，并调用其方法。下面是一个示例：
在父组件中：
复制代码
<template>
<div>
<child-component ref="childRef"></child-component>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.childRef.childMethod();
}
}
}
</script>
在子组件中：
复制代码
<template>
<div>
子组件内容
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log("子组件方法被调用");
}
}
}
</script>
在上述示例中，父组件通过ref指令给子组件命名为childRef，然后在父组件的方法callChildMethod中使用this.$refs.childRef来访问子组件的实例，并调用其方法childMethod。当点击按钮时，将会在控制台输出"子组件方法被调用"。
我要提问
复制内容
分享给好友
AI编程问答网 免责声明：
以上内容除特别注明外均来源于网友提问，AI编程问答网回答，权益归原著者所有；