Bootstrap

vue父组件调用子组件方法,传递参数

在 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 访问子组件的实例。

;