Vue中自定義標(biāo)簽及其使用方式
問題
我們在使用Vue開發(fā)移動端應(yīng)用程序時,常常使用Vant Weapp中的組件庫,但是我們想過它是怎么實現(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08