在vue3中父组件调用子组件的方式

在Vue 3中，父组件可以通过以下几种方式来调用子组件：

1. 使用标签方式调用：在父组件的模板中使用子组件的标签，就可以将子组件渲染到父组件中，例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

2. 使用动态组件方式调用：在父组件中使用`<component>`元素，并通过动态绑定的方式来指定要渲染的子组件，例如：

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'child-component'
    };
  }
};
</script>

3. 使用引用方式调用：在父组件中使用`ref`属性来引用子组件的实例，然后通过引用来调用子组件的方法或访问子组件的属性，例如：

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

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
};
</script>

这些是父组件调用子组件的几种常见方式，在实际开发中可以根据具体需求选择适合的方式。