Vue中自定义标签及其使用方式
更新时间：2022年06月29日 09:45:13 作者：小小前端_可笑可笑
这篇文章主要介绍了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>
效果
目前还不能够实现传递参数，等学会之后会继续更新
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3(optionApi)使用Element Plus库没有效果的解决方式
这篇文章主要介绍了vue3(optionApi)使用Element Plus库没有效果的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了如何使用Vue实现点击按钮小球加入购物车动画,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
解决vue2 在mounted函数无法获取prop中的变量问题
这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章是介绍一下vue3中的hooks以及它的用法，主要围绕两点来介绍，一个是hooks基本概念，另一个是vue3中hooks的使用方法，本文结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2023-03-03
ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的操作,下面这篇文章主要给大家介绍了关于在Vue3中如何更优雅的使用echart图表的相关资料,需要的朋友可以参考下2022-05-05
Vue整合Node.js直连Mysql数据库进行CURD操作过程详解
这篇文章主要给大家分享Vue整合Node.js，直连Mysql数据库进行CURD操作的详细过程，文中有详细的代码讲解，具有一定的参考价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vite项目如何从0开始配置eslint问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue+springboot实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本文详细介绍了如何在Vue应用中使用xlsx库来导出Excel文件,包括安装xlsx库、准备数据、创建导出方法、触发导出操作和自定义Excel文件等步骤,xlsx库提供了强大的API和灵活的自定义选项,使得处理Excel文件变得简单而高效2024-10-10
最新评论