vue3父组件电泳子组件方法

在Vue3中，父组件调用子组件的方法可以通过expose和ref来实现。

使用setup api时，我们可以通过ref来定义子组件实例，然后通过调用实例来获取子组件的数据和方法。例如，在父组件中，我们可以使用ref指令将子组件与一个变量关联起来，然后通过该变量来访问子组件的方法和数据。具体代码如下所示：

<template>
  <div class="parent">
    <child ref="childComp"></child>
    <button @click="onTry">点击试一试</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import child from './child.vue';

const childComp = ref(null);

const onTry = () => {
  let msg = childComp.value.title;
  childComp.value.play();
};
</script>

使用option api时，我们可以通过$refs来访问子组件的方法和数据。在父组件中，我们可以使用ref命令将子组件与一个变量关联起来，然后通过this.$refs来访问子组件的方法和数据。具体代码如下所示：

<template>
  <div class="parent">
    <child ref="childComp"></child>
    <button @click="onClick">点击试一试</button>
  </div>
</template>

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

export default {
  name: 'parent',
  components: {
    child,
  },
  methods: {
    onClick() {
      let msg = this.$refs.childComp.title;
      this.$refs.childComp.play();
    },
  },
};
</script>

以上就是Vue3父组件调用子组件方法的两种方式。使用setup api时，我们使用ref来定义子组件实例，并通过变量来访问子组件的方法和数据。而使用option api时，我们使用$refs来访问子组件的方法和数据。