The nested relationship between the components of Vue3 basic components

The nested relationship between components

The biggest advantage of components is reusability

When using the build step, we generally define the vue component in a separate .vue file, which is called a single file component (SFC for short)

composition

<template>
    <div>承载标签</div>
</template>

<script>
    //业务逻辑
    export default{
      
      }
</script>

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

Which templeteis the most important, the other two tags are optional

Component reference

<template>
	<!--第三步：使用组件-->
    <test/>
</template>

<script setup>
//第一步：引入组件
import test from "./components/test.vue"
exprot default{
      
      
    data(){
      
      
    //第二步，声明组件（vue3中可以省略此步骤）
        test
    }
}
</script>

<style>
/* 在这里添加全局样式 */
</style>

Component nesting relationship

Components allow us to divide the UI into independent, reusable parts and to think about each part independently. In practical applications, components are often organized into a hierarchically nested tree structure.

Similar to how we nest HTML elements, Vue implements its own component model, allowing us to encapsulate custom content and logic within each component