Vue 组件基础

简介

Vue 除了响应式的特性外，组件化也是也是 Vue 的另一大特性。

通过组件，可以将页面 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考和设计。

在实际应用中，组件常常被组织成层层嵌套的树状结构，使得开发页面的过程，更像是在搭建积木。

定义组件

当使用构建项目形式使用 Vue 开发时，一般会将 Vue 组件定义在一个单独的 .vue 文件中，这种形式被称为单文件组件 (简称 SFC)。

一个单文件组件可由三部分组成:

<script setup></script>: 用来编写组件的逻辑代码。
- 在单文件组件中，在设置 setup 参数后，不需要再写 setup() 函数。
- 在 script 标签中定义的变量和函数，可直接在 template 标签中使用，无需返回。
<template></template>: 用来编写组件中的元素。
<style></style>: 用来编写组件中元素的样式。

示例代码

Hello.vue

<script setup>
    import { ref } from 'vue'

    const msg = ref("Hello Vue")
    const fcolor = ref("")

    function addColor(){
        fcolor.value = "color:red;"
    }
</script>

<template>
    <p :style="fcolor"> 
        {{ msg }} 
    </p>
    <p>
        <button @click="addColor">添加字体颜色</button>
    </p>
</template>

<style>
    p{
        font-size: 50px;
    }
    button{
        font-size: 30px;
    }
</style>

使用组件

在使用 vite 构建一个 Vue 项目时，默认会创建一个名为 App.vue 的组件，该组件称为根组件，所有项目的的组件使用都会放在根组件中维护使用。

当然，可以自定义一个组件替换 App.vue 做为根组件。

本教程中使用默认的根组件进行继续开发。

当一个组件定义好后，需要在另一个组件中使用，在使用之前，需要先导入组件。

<script setup> 
    import 组件对象名 from 组件定义文件路径
</script>

完成导入后，在父组件中，就可以通过直接使用组件对象名做为标签名的形式使用组件。

<template>
    <组件对象名 />
    <!-- 或 -->
    <组件对象名> </组件对象名>
</template>

App.vue

<script setup>
import Hello from './components/MyComponents/Hello.vue';
</script>

<template>
    <Hello />
    <hr>
    <Hello></Hello>
</template>

组件布局

在实际应用中，组件常常被组织成如下图所示的层层嵌套的树状结构，其搭建的过程就像在堆叠积木，最终搭建的结果像一颗倒置的树或一个树根，所以在项目中第一个被引入的组件也称为根组件。

App.vue

<script setup>
import Header from './components/MyComponents/Header.vue';
import Main from './components/MyComponents/Main.vue';
import Aside from './components/MyComponents/Aside.vue';

</script>

<template>
    <div class="root">
        <Header></Header>
        <div class="rmain">
            <Main></Main>
            <Aside></Aside>
        </div>
    </div>

</template>

<style>
    .root{
        width: 1200px;
        height: 800px;
        background: burlywood;
        margin: 0 auto;
        padding: 15px;
        box-sizing: border-box;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
    }
    .rmain{
        display: flex;
    }
</style>

Header.vue

<script setup>
    import {ref} from "vue"
    const header_msg = ref("Header")
</script>

<template>
    <div class="header">
        {{ header_msg }}
    </div>
</template>

<style>
    .header{
        width: 1170px;
        height: 100px;
        background:red;
    }
</style>

Main.vue

<script setup>
    import {ref} from "vue"
    import Article from "./Article.vue";
    const mmsg = ref("Main")
</script>

<template>
    <div class="main">
        {{ mmsg }}
        <Article></Article>
        <Article></Article>
    </div>
</template>

<style>
    .main{
        width: 900px;
        height: 625px;
        margin-top: 15px;
        padding: 15px;
        background: yellow;
    }
</style>

Article.vue

<script setup>
    import {ref} from "vue"
    const asmsg = ref("Aticle")
</script>

<template>
    <div class="aticle">
        {{ asmsg }}
    </div>
</template>

<style>
    .aticle{
        width: 870px;
        height: 250px;
        margin-bottom: 15px;
        background: orange;
        border: 1px solid #000;
    }
</style>

Aside.vue

<script setup>
    import Item from "./Item.vue";
    import {ref} from "vue"
    const asmsg = ref("Aside")
</script>

<template>
    <div class="aside">
        {{ asmsg }}
        <item></item>
        <item></item>
        <item></item>
    </div>
</template>

<style>
    .aside{
        width: 220px;
        height: 625px;
        margin-top: 15px;
        margin-left: 15px;
        padding: 15px;
        background: purple;
    }
</style>

Item.vue

<script setup>
    import {ref} from "vue"
    const imsg = ref("Item")
</script>

<template>
    <div class="item">
        {{ imsg }}
    </div>
</template>

<style>
    .item{
        width: 220px;
        height: 160px;
        margin-block: 15px;
        background: green;
    }
</style>

总结

组件可以将页面 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考和设计。
组件由 script，template，style 三部分组成。
组件使用前需要导入。
通过组件可以进行页面的布局，可重用代码，提高代码效率。