Vue中自定义标签及其使用方式
目录
问题
需求
自定义
创建组件的vue文件
编辑组件
使用
导入
申明使用
使用
整个代码
效果
问题我们在使用Vue开发移动端应用程序时，常常使用Vant Weapp中的组件库，但是我们想过它是怎么实现的吗？是否我们也可以自己编写并且调用呢？
这里我将要讲解我在自定义标签方面的使用。
需求这里我想要建一个名叫：<test>的组件。
功能是：组成两个按钮，且两个按钮颜色不同。
注意：这里的组件名、功能都是可以自定义的，按自己需求来取舍。
自定义 创建组件的vue文件我们更目录设置为src。
创建调用文件src/view/test/main.vue，用来运行自己定义的组件。
创建自定义组件文件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>
效果
目前还不能够实现传递参数，等学会之后会继续更新
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Blossom
2020-08-06
Gretchen
2020-04-28
Claire
2021-05-21
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20