vue 父组件触发子组件方法

在Vue中，父组件可以通过props将数据传递给子组件，而子组件可以通过事件向父组件发送消息。如果你想要在父组件中触发子组件的方法，可以使用ref来引用子组件，并通过该引用调用子组件的方法。

首先，在父组件中，使用ref属性给子组件添加一个引用名称。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="triggerChildMethod">触发子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

在上面的例子中，我们给子组件添加了一个引用名称`child`，然后在父组件的`triggerChildMethod`方法中，通过`this.$refs.child`来获取子组件的实例，并调用子组件的`childMethod`方法。

接下来，在子组件中，定义一个方法供父组件调用。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child component'
    }
  },
  methods: {
    childMethod() {
      console.log('Child method triggered');
      // 在这里编写你想要执行的逻辑
    }
  }
}
</script>

在上面的例子中，我们定义了一个`childMethod`方法，当父组件调用该方法时，会在控制台输出`Child method triggered`。

这样，当父组件中的按钮被点击时，就会触发子组件的方法。