Vue中自定義標(biāo)簽及其使用方式
問題
我們在使用Vue開發(fā)移動端應(yīng)用程序時,常常使用Vant Weapp中的組件庫,但是我們想過它是怎么實(shí)現(xiàn)的嗎?是否我們也可以自己編寫并且調(diào)用呢?
這里我將要講解我在自定義標(biāo)簽方面的使用。
需求
這里我想要建一個名叫:<test>的組件。
功能是:組成兩個按鈕,且兩個按鈕顏色不同。
注意:這里的組件名、功能都是可以自定義的,按自己需求來取舍。
自定義
創(chuàng)建組件的vue文件
我們更目錄設(shè)置為src。
創(chuàng)建調(diào)用文件src/view/test/main.vue,用來運(yùn)行自己定義的組件。
創(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
導(dǎo)入
import Test from './../components/test.vue';
申明使用
export default {
components: {
Test,
},
}使用
<template> <test></test> </template>
整個代碼
<template> ?? ?<test></test> </template>
<script>
?? ?export default {
? ? components: {
? ? ? Test,
? ? },
}
</script>
效果

目前還不能夠?qū)崿F(xiàn)傳遞參數(shù),等學(xué)會之后會繼續(xù)更新
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包
這篇文章主要介紹了vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08

