Vue中自定義標簽及其使用方式
更新時間：2022年06月29日 09:45:13 作者：小小前端_可笑可笑
這篇文章主要介紹了Vue中自定義標簽及其使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
問題
我們在使用Vue開發(fā)移動端應用程序時，常常使用Vant Weapp中的組件庫，但是我們想過它是怎么實現(xiàn)的嗎？是否我們也可以自己編寫并且調用呢？
這里我將要講解我在自定義標簽方面的使用。
需求
這里我想要建一個名叫：<test>的組件。
功能是：組成兩個按鈕，且兩個按鈕顏色不同。
注意：這里的組件名、功能都是可以自定義的，按自己需求來取舍。
自定義
創(chuàng)建組件的vue文件
我們更目錄設置為src。
創(chuàng)建調用文件src/view/test/main.vue，用來運行自己定義的組件。
創(chuàng)建自定義組件文件src/view/components/test.vue，我們將要編輯的組件。
編輯組件
src/view/components/test.vue
// 這里的組成按照自己需求來
<template>
<div>
<van-button slot="button" color="red">btn1</van-button>
<van-button slot="button" color="blue">btn2</van-button>
</div>
</template>
<script>
import { Button } from 'vant'; // 使用到vant的Button
export default {
name: 'test', // 組件使用空間
components: {
[Button.name]: Button,
},
}
</script>
使用
src/view/test/main.vue
導入
import Test from './../components/test.vue';
申明使用
export default {
components: {
Test,
},
}使用
<template> <test></test> </template>
整個代碼
<template> ?? ?<test></test> </template>
<script>
?? ?export default {
? ? components: {
? ? ? Test,
? ? },
}
</script>
效果
目前還不能夠實現(xiàn)傳遞參數(shù)，等學會之后會繼續(xù)更新
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3(optionApi)使用Element Plus庫沒有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫沒有效果的解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
解決vue2 在mounted函數(shù)無法獲取prop中的變量問題
這篇文章主要介紹了vue2 在mounted函數(shù)無法獲取prop中的變量的解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章是介紹一下vue3中的hooks以及它的用法，主要圍繞兩點來介紹，一個是hooks基本概念，另一個是vue3中hooks的使用方法，本文結合實例代碼給大家講解的非常詳細，需要的朋友參考下吧2023-03-03
ECharts是一個強大的畫圖插件,在vue項目中,我們常?？梢砸肊charts來完成完成一些圖表的操作,下面這篇文章主要給大家介紹了關于在Vue3中如何更優(yōu)雅的使用echart圖表的相關資料,需要的朋友可以參考下2022-05-05
Vue整合Node.js直連Mysql數(shù)據(jù)庫進行CURD操作過程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫進行CURD操作的詳細過程，文中有詳細的代碼講解，具有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vite項目如何從0開始配置eslint問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue+springboot實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue應用中使用xlsx庫實現(xiàn)Excel文件導出的詳細步驟
本文詳細介紹了如何在Vue應用中使用xlsx庫來導出Excel文件,包括安裝xlsx庫、準備數(shù)據(jù)、創(chuàng)建導出方法、觸發(fā)導出操作和自定義Excel文件等步驟,xlsx庫提供了強大的API和靈活的自定義選項,使得處理Excel文件變得簡單而高效2024-10-10