vue 父组件调用子组件方法 提供代码示例

在Vue中，父组件可以通过ref属性来获取子组件的实例，并调用其方法。下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <child-component ref="child"></child-component>
  </div>
</template>

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

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

<!-- 子组件 -->
<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>

在上面的示例中，父组件通过定义ref属性`<child-component ref="child"></child-component>`来获取子组件的实例，并将其命名为"child"。

然后，父组件中的方法`callChildMethod()`通过`this.$refs.child`来访问子组件实例，并调用其方法`childMethod()`。

当点击按钮时，父组件就会调用子组件的方法，并在控制台中输出"子组件方法被调用"。