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>

效果

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

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

赞 (0)

相关推荐

  • Vue中el-form标签中的自定义el-select下拉框标签功能

    Vue中el-form标签中的自定义el-select下拉框标签功能

    页面写死el-select下拉框标签: 通过v-for="item in stateArr"绑定,stateArr声明在Vue组件里面的data参数里面代码如下: 到此这篇关于Vue中el-form标签中的自定义el-select下拉框标签功能的文章就介绍到这了,更多相关Vue el-form标签 自定义el-select下拉框标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • vue自定义标签和单页面多路由的实现代码

    1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./ 然后导出组件: export default { components: { vHead, } };

  • vue使用echart自定义标签以及颜色

    vue使用echart自定义标签以及颜色

    本文实例为大家分享了vue使用echart自定义标签以及颜色的具体代码,供大家参考,具体内容如下 常规样式 UI画的样式效果 细节在于这个小圆点的颜色要和饼图块的颜色一致,这在5.0(echarts版本)之前的版本是可以使用这一段代码实现的. label:{ formatter: params => {//● return ( '{icon|▅}{name|' +params.name+ '}{value|' + params.value + '}' ); }, rich: { icon: {

  • Vue 自定义标签的src属性不能使用相对路径的解决

    场景 吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用. 如下面 3 种加载图片的方式 <!-- 正常加载 --> <v-img :src="require('../../assets/logo.png')" /> <!-- 无法加载 --> <v-img src="../../assets/logo.png" /> <!

  • vue2.0实现的tab标签切换效果（内容可自定义）示例

    vue2.0实现的tab标签切换效果（内容可自定义）示例

    本文实例讲述了vue2.0实现的tab标签切换效果.分享给大家供大家参考,具体如下: 这里利用vue2.0 实现tab标签切换效果 比较实用 初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. 先上代码: html部分 [记得引入vue文件哦] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

  • 详解Vue-基本标签和自定义控件

    详解Vue-基本标签和自定义控件

    按照国际惯例先安利:Useful-Open-Source-Android_jb51.rar 上一篇把环境搭完了,然后把默认的8080内容跑通了,这一片尝试把常用的一些标签给学习一下(按钮啊,列表,图片啥的) 整篇都是跟着官方教程学,只是加入一系列自己的理解和分析,方便以后温故 默认环境已经帮我们把包结构建好了,如下 index.html是我们的页面 main.js是让App.vue和页面产生关联的"挂载js文件"(不知道这么描述合适不合适,有问题欢迎提出) App.vue就是我们具体的

  • Vue中自定义标签及其使用方式

    Vue中自定义标签及其使用方式

    目录 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入 申明使用 使用 整个代码 效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否我们也可以自己编写并且调用呢? 这里我将要讲解我在自定义标签方面的使用. 需求 这里我想要建一个名叫:<test>的组件. 功能是:组成两个按钮,且两个按钮颜色不同. 注意:这里的组件名.功能都是可以自定义的,按自己需求来取舍. 自定义 创建组件的vue文件 我们更目录设置为s

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • vue中自定义指令directive的详细指南

    目录 一. 什么是自定义指令 二. 如何自定义指令 钩子函数 三.应用场景 输入框防抖 图片懒加载 一键 Copy的功能 拖拽 总结 一. 什么是自定义指令 我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 指令使用的几种方式: //会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • vue中自定义指令（directive）的基本使用方法

    vue中自定义指令（directive）的基本使用方法

    目录 前言 正文 1.全局注册 2.局部注册 3.钩子函数及参数设置 4.灵活用法 (1)动态指令参数 (2)函数简写方式 (3)对象字面量方式 5.使用场景 写在最后 前言 在vue项目中我们经常使用到 v-show ,v-if,v-for等内置的指令,除此之外vue还提供了非常方便的自定义指令,供我们对普通的dom元素进行底层的操作.使我们的日常开发变得更加方便快捷.本文就来总结一下自定义指令的使用方法及常用的场景. 正文 1.全局注册 这里全局注册一个指令,用于使用该指令的元素加一个红色边

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • Vue中video标签如何实现不静音自动播放

    由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性. 但是在开发的过程中我们需要用视频自动有声播放,比如一些学习网站,需要老师或同学进入页面就可以播放学习视频,那么如何去实现呢? 我是在Vue框架下实现的,其他框架仅供参考. 首先我们要让video标签能够自动播放,也就是让video标签静音条件下自动播放. <video ref="videoPlayer" id="vide

随机推荐