Vue中自定義標(biāo)簽及其使用方式
問(wèn)題
我們?cè)谑褂肰ue開(kāi)發(fā)移動(dòng)端應(yīng)用程序時(shí),常常使用Vant Weapp中的組件庫(kù),但是我們想過(guò)它是怎么實(shí)現(xiàn)的嗎?是否我們也可以自己編寫(xiě)并且調(diào)用呢?
這里我將要講解我在自定義標(biāo)簽方面的使用。
需求
這里我想要建一個(gè)名叫:<test>的組件。
功能是:組成兩個(gè)按鈕,且兩個(gè)按鈕顏色不同。
注意:這里的組件名、功能都是可以自定義的,按自己需求來(lái)取舍。
自定義
創(chuàng)建組件的vue文件
我們更目錄設(shè)置為src。
創(chuàng)建調(diào)用文件src/view/test/main.vue,用來(lái)運(yùn)行自己定義的組件。
創(chuàng)建自定義組件文件src/view/components/test.vue,我們將要編輯的組件。
編輯組件
src/view/components/test.vue
// 這里的組成按照自己需求來(lái) <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>
整個(gè)代碼
<template> ?? ?<test></test> </template>
<script> ?? ?export default { ? ? components: { ? ? ? Test, ? ? }, } </script>
效果
目前還不能夠?qū)崿F(xiàn)傳遞參數(shù),等學(xué)會(huì)之后會(huì)繼續(xù)更新
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解
這篇文章主要為大家介紹了使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包
這篇文章主要介紹了vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決
這篇文章主要介紹了關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09