vue3引入子组件

// 父组件 ParentComponent.vue

<template>
  <div>
    <h1>这是父组件</h1>
    <!-- 引入并使用子组件 -->
    <ChildComponent msg="来自父组件的消息" />
  </div>
</template>

<script>
// 引入子组件
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    // 注册子组件
    ChildComponent
  }
}
</script>

<style scoped>
/* 样式部分 */
</style>

// 子组件 ChildComponent.vue

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

<script>
export default {
  name: 'ChildComponent',
  props: {
    // 接收父组件传递的属性
    msg: String
  }
}
</script>

<style scoped>
/* 样式部分 */
</style>

解释说明：

1. 引入子组件：

   • 在父组件 ParentComponent.vue 中，通过 import 语句引入子组件 ChildComponent.vue。

2. 注册子组件：

   • 在父组件的 components 选项中注册子组件，这样可以在模板中使用该子组件。

3. 使用子组件：

   • 在父组件的模板中，使用 <ChildComponent /> 标签来引入子组件，并可以通过属性（如 msg）传递数据给子组件。

4. 子组件接收属性：

   • 子组件 ChildComponent.vue 通过 props 选项定义了它可以接收的属性（如 msg），并在模板中使用这些属性。

以上代码展示了如何在 Vue 3 中引入和使用子组件。