vue 父组件怎么调用子组件方法及事件

在Vue中，父组件可以通过使用`ref`属性来引用子组件，并通过该引用调用子组件的方法和触发子组件的事件。

下面是一个示例，展示了如何在父组件中调用子组件的方法和触发子组件的事件：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
    <button @click="triggerChildEvent">触发子组件事件</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod(); // 调用子组件的方法
    },
    triggerChildEvent() {
      this.$refs.child.$emit('child-event'); // 触发子组件的事件
    }
  }
}
</script>

在上面的示例中，父组件通过`ref`属性给子组件命名为`child`，然后可以通过`this.$refs.child`来访问子组件实例。通过`this.$refs.child.childMethod()`可以调用子组件的方法`childMethod()`。通过`this.$refs.child.$emit('child-event')`可以触发子组件的事件`child-event`。