vue3引用组件

作者：寒江映月发布日期:2025-02-25 浏览:97

<template>
  <div>
    <!-- 引用子组件 -->
    <MyComponent msg="Hello Vue 3!" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    // 注册子组件
    MyComponent
  }
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

模板部分 (<template>):
- 使用 <MyComponent> 标签来引用和展示子组件，并通过 msg 属性传递数据。
脚本部分 (<script>):
- 使用 import 语句引入子组件文件。
- 在 components 选项中注册子组件，使其可以在模板中使用。
样式部分 (<style scoped>):
- 可选部分，用于定义组件的样式。scoped 关键字确保样式仅应用于当前组件。

这个示例展示了如何在 Vue 3 中引用和使用一个子组件。

上一篇：vue 安装依赖

下一篇：vue数组添加对象