Vue3基础 组件的组成 组件之间的嵌套关系

组件的组成 组件之间的嵌套关系

组件最大的优势就是可复用性

当使用构建步骤时，我们一般会将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 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑