手把手教你Vue3如何封裝組件
前言
在開發(fā)Vue3項目的過程中，我們經(jīng)常會使用組件去進行復(fù)用或者用組件去簡潔index.vue文件，那什么是組件呢？如果把index.vue文件說成是一棟大樓的話，那組件就是一塊塊磚
通常我們使用的element框架里的按鈕，表格，彈窗等也算是組件，我們可以通過element文檔中的教程之間引用就行
本篇說的封裝組件則是在大型開發(fā)中常用的封裝組件，用于進行組件復(fù)用等操作
例如我們在使用element的標(biāo)簽頁tabs組件時，如下圖所示：
tabs組件可以通過選項卡功能去切換標(biāo)簽頁，當(dāng)我們在index.vue文件使用tabs時，我們需要在每一個標(biāo)簽內(nèi)去寫要寫的內(nèi)容
<template>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="User" name="first">要寫的內(nèi)容</el-tab-pane>
<el-tab-pane label="Config" name="second">要寫的內(nèi)容</el-tab-pane>
<el-tab-pane label="Role" name="third">要寫的內(nèi)容</el-tab-pane>
<el-tab-pane label="Task" name="fourth">要寫的內(nèi)容</el-tab-pane>
</el-tabs>
</template>
這樣的話，我們在index.vue文件就可能寫上幾百行上千行的代碼，這樣對于編寫后續(xù)代碼和對代碼進行維護都是一件不容易的事情，所以我們可以對每個標(biāo)簽頁的內(nèi)容都進行封裝成一個個組件
方法如下：
①創(chuàng)建一個components目錄，并在目錄下創(chuàng)建對應(yīng)的組件.vue文件
②把對應(yīng)的標(biāo)簽頁內(nèi)容放進對應(yīng)的組件.vue中，不要忘了加上script和style內(nèi)容
③在index.vue文件中通過import...from...引入對應(yīng)的組件
④在標(biāo)簽頁中放組件即<el-tab-pane label="User" name="first"><組件名/></el-tab-pane>
有時候會發(fā)現(xiàn)進行了組件封裝后，頁面變空白報錯了，那原因可能有如下幾個：
①是沒有引入script文件
②是在script文件中沒有寫上setup或者lang=ts
③引入組件名字錯誤
同理是如果引入的頁面樣式發(fā)生了變化，那就是沒有引入style或者在style中少寫了原文件中的lang=scss之類的預(yù)編譯語言標(biāo)記
在開發(fā)中的思路有兩種：一是先在index.vue中進行寫，寫完布局后再封裝組件，這種情況下需要注意script和style中要寫上對應(yīng)tabs頁面的注釋，防止要封裝組件了不知道這個函數(shù)是哪個組件的；二是直接在組件中進行編寫，寫完后再引入到主文件中，這樣的話需要注意布局對index.vue的影響
總結(jié)
到此這篇關(guān)于Vue3如何封裝組件的文章就介紹到這了,更多相關(guān)Vue3封裝組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue-element-admin安裝依賴npm install報錯問題
這篇文章主要介紹了解決vue-element-admin安裝依賴npm install報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue.js使用computed屬性實現(xiàn)數(shù)據(jù)自動更新
在Vue組件中,computed屬性是在組件的選項對象中聲明的,你可以把它們想象成組件的一個小功能,告訴Vue當(dāng)某些數(shù)據(jù)變化時,如何更新界面,本文給大家介紹了Vue.js使用computed屬性實現(xiàn)數(shù)據(jù)自動更新,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關(guān)資料，文中介紹的非常詳細，對大家的理解和學(xué)習(xí)具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹的是如何用Vue做一個簡單的隨機點名冊，主要是做個簡單的點名器，不做樣式,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要給大家介紹了關(guān)于vue如何實現(xiàn)pc和移動端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
vue pages 多入口項目 + chainWebpack 全局引用縮寫說明
這篇文章主要介紹了vue pages 多入口項目 + chainWebpack 全局引用縮寫說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個ref對象，需要注意的是它只會解析對象的第一層屬性，語法直接傳入對象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下2022-03-03
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07