组件的组成 组件之间的嵌套关系
组件最大的优势就是可复用性
当使用构建步骤时,我们一般会将vue组件定义在一个单独的.vue文件中,这被叫做单文件组件(简称SFC)
组成
<template>
<div>承载标签</div>
</template>
<script>
//业务逻辑
export default{
}
</script>
<style scoped>
/*样式*/
</style>
其中templete
是最主要的,其它两个标签为可选项
组件的引用
<template>
<!--第三步:使用组件-->
<test/>
</template>
<script setup>
//第一步:引入组件
import test from "./components/test.vue"
exprot default{
data(){
//第二步,声明组件(vue3中可以省略此步骤)
test
}
}
</script>
<style>
/* 在这里添加全局样式 */
</style>
组件的嵌套关系
组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构
这和我们嵌套 HTML 元素的方式类似,Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑