vue设置标签属性,vue自定义标签属性绑定值

　　本文主要介绍了Vue中的自定义标签以及如何使用，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　问题要求：使用导入声明使用全代码效果自定义创建组件的vue文件编辑组件。

问题

　　我们在使用Vue开发移动应用时，经常会用到Vant Weapp中的组件库，但是我们有没有想过它是如何实现的呢？我们可以自己写自己叫吗？

　　这里我将解释我对自定义标签的使用。

需求

　　这里我想构建一个名为：test的组件。

　　功能：形成两个不同颜色的按钮。

　　注意：这里的组件名称和功能都是可以自定义的，可以根据自己的需求来选择。

自定义

创建组件的vue文件

　　我们的目录设置为src。

　　创建文件src/view/test/main.vue来运行您自己定义的组件。

　　创建自定义组件文件src/view/components/test.vue，我们将编辑该组件。

编辑组件

　　src/view/components/test.vue

　　//这里的构图是根据自己的需要。

　　模板

　　差异

　　van-button slot= button color= red Bt n1/van-button

　　van-button slot= button color= blue Bt N2/van-button

　　/div

　　/模板

　　脚本

　　从“vant”导入{ Button }；//使用按钮导航

　　导出默认值{

　　名称：“测试”，//组件使用空间

　　组件：{

　　[Button.name]:按钮，

　　},

　　}

　　/脚本

使用

　　src/view/test/main.vue

导入

　　从导入测试。/./components/test . vue ；

申明使用

　　导出默认值{

　　组件：{

　　测试，

　　},

　　}

使用

　　模板

　　测试/测试

　　/模板

整个代码

　　模板

　　测试/测试

　　/模板

　　脚本

　　导出默认值{

　　组件：{

　　测试，

　　},

　　}

　　/脚本

效果

　　目前无法实现转移参数，学习后会继续更新。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。