欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手把手教你Vue3如何封裝組件

 更新時間:2023年02月27日 11:38:09   作者:前端小王hs  
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關于Vue3如何封裝組件的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下

前言

在開發(fā)Vue3項目的過程中,我們經(jīng)常會使用組件去進行復用或者用組件去簡潔index.vue文件,那什么是組件呢?如果把index.vue文件說成是一棟大樓的話,那組件就是一塊塊磚

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

本篇說的封裝組件則是在大型開發(fā)中常用的封裝組件,用于進行組件復用等操作

例如我們在使用element的標簽頁tabs組件時,如下圖所示:

tabs組件

tabs組件可以通過選項卡功能去切換標簽頁,當我們在index.vue文件使用tabs時,我們需要在每一個標簽內去寫要寫的內容

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

這樣的話,我們在index.vue文件就可能寫上幾百行上千行的代碼,這樣對于編寫后續(xù)代碼和對代碼進行維護都是一件不容易的事情,所以我們可以對每個標簽頁的內容都進行封裝成一個個組件

方法如下:

①創(chuàng)建一個components目錄,并在目錄下創(chuàng)建對應的組件.vue文件

②把對應的標簽頁內容放進對應的組件.vue中,不要忘了加上script和style內容

③在index.vue文件中通過import...from...引入對應的組件

④在標簽頁中放組件即<el-tab-pane label="User" name="first"><組件名/></el-tab-pane>

有時候會發(fā)現(xiàn)進行了組件封裝后,頁面變空白報錯了,那原因可能有如下幾個:

①是沒有引入script文件

②是在script文件中沒有寫上setup或者lang=ts

③引入組件名字錯誤

同理是如果引入的頁面樣式發(fā)生了變化,那就是沒有引入style或者在style中少寫了原文件中的lang=scss之類的預編譯語言標記

在開發(fā)中的思路有兩種:一是先在index.vue中進行寫,寫完布局后再封裝組件,這種情況下需要注意script和style中要寫上對應tabs頁面的注釋,防止要封裝組件了不知道這個函數(shù)是哪個組件的;二是直接在組件中進行編寫,寫完后再引入到主文件中,這樣的話需要注意布局對index.vue的影響

總結

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

相關文章

最新評論