前言

在開(kāi)發(fā)Vue3項(xiàng)目的過(guò)程中，我們經(jīng)常會(huì)使用組件去進(jìn)行復(fù)用或者用組件去簡(jiǎn)潔index.vue文件，那什么是組件呢？如果把index.vue文件說(shuō)成是一棟大樓的話，那組件就是一塊塊磚

通常我們使用的element框架里的按鈕，表格，彈窗等也算是組件，我們可以通過(guò)element文檔中的教程之間引用就行

本篇說(shuō)的封裝組件則是在大型開(kāi)發(fā)中常用的封裝組件，用于進(jìn)行組件復(fù)用等操作

例如我們?cè)谑褂胑lement的標(biāo)簽頁(yè)tabs組件時(shí)，如下圖所示：

tabs組件可以通過(guò)選項(xiàng)卡功能去切換標(biāo)簽頁(yè)，當(dāng)我們?cè)趇ndex.vue文件使用tabs時(shí)，我們需要在每一個(gè)標(biāo)簽內(nèi)去寫(xiě)要寫(xiě)的內(nèi)容

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">要寫(xiě)的內(nèi)容</el-tab-pane>
    <el-tab-pane label="Config" name="second">要寫(xiě)的內(nèi)容</el-tab-pane>
    <el-tab-pane label="Role" name="third">要寫(xiě)的內(nèi)容</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">要寫(xiě)的內(nèi)容</el-tab-pane>
  </el-tabs>
</template>

這樣的話，我們?cè)趇ndex.vue文件就可能寫(xiě)上幾百行上千行的代碼，這樣對(duì)于編寫(xiě)后續(xù)代碼和對(duì)代碼進(jìn)行維護(hù)都是一件不容易的事情，所以我們可以對(duì)每個(gè)標(biāo)簽頁(yè)的內(nèi)容都進(jìn)行封裝成一個(gè)個(gè)組件

方法如下：

①創(chuàng)建一個(gè)components目錄，并在目錄下創(chuàng)建對(duì)應(yīng)的組件.vue文件

②把對(duì)應(yīng)的標(biāo)簽頁(yè)內(nèi)容放進(jìn)對(duì)應(yīng)的組件.vue中，不要忘了加上script和style內(nèi)容

③在index.vue文件中通過(guò)import...from...引入對(duì)應(yīng)的組件

④在標(biāo)簽頁(yè)中放組件即<el-tab-pane label="User" name="first"><組件名/></el-tab-pane>

有時(shí)候會(huì)發(fā)現(xiàn)進(jìn)行了組件封裝后，頁(yè)面變空白報(bào)錯(cuò)了，那原因可能有如下幾個(gè)：

①是沒(méi)有引入script文件

②是在script文件中沒(méi)有寫(xiě)上setup或者lang=ts

③引入組件名字錯(cuò)誤

同理是如果引入的頁(yè)面樣式發(fā)生了變化，那就是沒(méi)有引入style或者在style中少寫(xiě)了原文件中的lang=scss之類的預(yù)編譯語(yǔ)言標(biāo)記

在開(kāi)發(fā)中的思路有兩種：一是先在index.vue中進(jìn)行寫(xiě)，寫(xiě)完布局后再封裝組件，這種情況下需要注意script和style中要寫(xiě)上對(duì)應(yīng)tabs頁(yè)面的注釋，防止要封裝組件了不知道這個(gè)函數(shù)是哪個(gè)組件的；二是直接在組件中進(jìn)行編寫(xiě)，寫(xiě)完后再引入到主文件中，這樣的話需要注意布局對(duì)index.vue的影響

總結(jié)

到此這篇關(guān)于Vue3如何封裝組件的文章就介紹到這了,更多相關(guān)Vue3封裝組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論