手把手教你Vue3如何封裝組件
前言
在開發(fā)Vue3項(xiàng)目的過程中,我們經(jīng)常會使用組件去進(jìn)行復(fù)用或者用組件去簡潔index.vue文件,那什么是組件呢?如果把index.vue文件說成是一棟大樓的話,那組件就是一塊塊磚
通常我們使用的element框架里的按鈕,表格,彈窗等也算是組件,我們可以通過element文檔中的教程之間引用就行
本篇說的封裝組件則是在大型開發(fā)中常用的封裝組件,用于進(jìn)行組件復(fù)用等操作
例如我們在使用element的標(biāo)簽頁tabs組件時,如下圖所示:
tabs組件可以通過選項(xiàng)卡功能去切換標(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ù)代碼和對代碼進(jìn)行維護(hù)都是一件不容易的事情,所以我們可以對每個標(biāo)簽頁的內(nèi)容都進(jìn)行封裝成一個個組件
方法如下:
①創(chuàng)建一個components目錄,并在目錄下創(chuàng)建對應(yīng)的組件.vue文件
②把對應(yīng)的標(biāo)簽頁內(nèi)容放進(jìn)對應(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)進(jìn)行了組件封裝后,頁面變空白報錯了,那原因可能有如下幾個:
①是沒有引入script文件
②是在script文件中沒有寫上setup或者lang=ts
③引入組件名字錯誤
同理是如果引入的頁面樣式發(fā)生了變化,那就是沒有引入style或者在style中少寫了原文件中的lang=scss之類的預(yù)編譯語言標(biāo)記
在開發(fā)中的思路有兩種:一是先在index.vue中進(jìn)行寫,寫完布局后再封裝組件,這種情況下需要注意script和style中要寫上對應(yīng)tabs頁面的注釋,防止要封裝組件了不知道這個函數(shù)是哪個組件的;二是直接在組件中進(jìn)行編寫,寫完后再引入到主文件中,這樣的話需要注意布局對index.vue的影響
總結(jié)
到此這篇關(guān)于Vue3如何封裝組件的文章就介紹到這了,更多相關(guān)Vue3封裝組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04vue左右側(cè)聯(lián)動滾動的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實(shí)現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法
本篇文章主要介紹了詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05vue3結(jié)合ts從零實(shí)現(xiàn)vueuse的useRouteQuery方法
這篇文章主要為大家詳細(xì)介紹了如何使用vue3與ts從零實(shí)現(xiàn)一個類vueuse的useRouteQuery方法,并解決vueuse的useRouteQuery方法存在的一些問題,感興趣的可以了解下2024-03-03vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實(shí)例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實(shí)例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Vue中使用JsonView來展示Json樹的實(shí)例代碼
這篇文章主要介紹了Vue之使用JsonView來展示Json樹的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11ant-design-vue 時間選擇器賦值默認(rèn)時間的操作
這篇文章主要介紹了ant-design-vue 時間選擇器賦值默認(rèn)時間的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨過來看看吧2020-10-10VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程
基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧2023-08-08