在 Vue 中,父组件可以通过在子组件标签上绑定事件来调用子组件的方法,并且可以通过 $event 来传递参数。
例如,如果你想在父组件中调用子组件的方法 sayHello,并传递参数 'John',你可以在父组件模板中这样写:
<template>
<div>
<button @click="sayHelloToChild('John')">调用子组件方法</button>
<child-component ref="childComponent"></child-component>
</div>
</template>
<script>
export default {
methods: {
sayHelloToChild(name) {
// 调用子组件的方法
this.$refs.childComponent.sayHello(name);
}
}
}
</script>
在子组件中,你可以这样定义 sayHello 方法:
<template>
<!-- 子组件模板 -->
</template>
<script>
export default {
methods: {
sayHello(name) {
console.log(`Hello, ${name}!`);
}
}
}
</script>
注意,在父组件调用子组件的方法之前,你需要使用 ref 来给子组件设置一个引用,然后才能通过 this.$refs.childComponent 访问子组件的实例。