创建组件/子组件,后缀名为 .vue,如 HelloWorld.vue
位置:普通组件放在 components 目录,并根据需要进一步分类;如视图类组件放在 views 目录
命名:普通组件根据功能命名;视图类组件采用前缀或后缀的形式加以区分
<script setup> //逻辑 </script> <template> //结构 </template> <style> //样式 </style>
父组件在 <script> 引入子组件
引入时,输入组件部分或全名,IDE会自动获取组件及补充相对路径;注意看代码提示
不能省略后缀名 .vue
可以使用相对路径
也可以使用路径别名 @ 从 src 开始引用 - 建议
<script setup> import HelloWorld from '@/components/HelloWorld.vue' </script>
为了按需引入,减少加载时间,特别是首屏加载,通常采用 异步组件 的形式引入
采用了异步组件,打包的时,会拆分成多个 .js 文件
import { defineAsyncComponent } from 'vue' const HelloWorld = defineAsyncComponent(() => import('./components/HelloWorld.vue') )
父组件在结构 <template> 中使用组件/子组件
怎么引入就怎么使用
可以使用单标签或双标签
可以多次使用
<template> <h1>Here is a child component!</h1> <HelloWorld /> <HelloWorld></HelloWorld> </template>
import Footer from '@/components/Footer.vue'; app.component('Footer', Footer)