当前位置:首页 > 前端技术 > Vue中自定义标签及其使用

Vue中自定义标签及其使用

2022年08月04日 17:20:49前端技术18

问题

  • 我们在使用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>

效果

Vue中自定义标签及其使用 _ JavaClub全栈架构师技术笔记


目前还不能够实现传递参数,等学会之后会继续更新


本人学历有限,有问题的地方希望诸位给出指导,谢谢


作者:小小前端_可笑可笑
来源链接:https://blog.csdn.net/weixin_44901846/article/details/107468488

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/16974.html

标签: vue
分享给朋友:

“Vue中自定义标签及其使用” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

vue中axios的封装

vue中axios的封装

https://juejin.im/post/5b55c118f265da0f6f1aa354 掘金的网址(很好) 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promi...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。