我们在搭建好的手脚架中 进行使用

一、在src =》components => 创建XXbtn文件夹用来存放你的组件 =》在创建一个vue的文件 。

二、在src =》 components =》 创建index.js 用来注册你的组件

三、编辑组件内容

我这边是仿element-ui的一个输入框的功能组件。很简单的一个。

四、编辑index.js

这个地方的name名是你使用的时候的名字。最好就用同一个，就好。

五、在main.js中引入 index.js

六、使用

在需要使用的地方直接使用就好

 

这边因为需要把子组件里的内容给传过来，

vue怎么自定义组件的更多相关文章

  1. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

  3. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

  4. vue之自定义组件

    除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...

  5. vue 相邻自定义组件渲染错误正确的打开方式

    话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...

  6. 编程小白入门分享五：Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  7. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  8. vue发布自定义组件到npm

    一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后 ...

  9. Vue之自定义组件的v-model

    最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...

  10. Vue的自定义组件之间的数据传递

    一,父级传向子级 1,在子级的属性中添加props:['myname',......],参数可以传多个,看具体而定: 2,在父级data中定义好需要传递的变量数据,例如name:"rose& ...

随机推荐

  1. 在Ubuntu上实现人脸识别登录

    安装Howdy: howdy项目地址 sudo add-apt-repository ppa:boltgolt/howdy sudo apt update sudo apt install howdy ...

  2. JDK8--08：Optional

    在程序运行时,空指针异常应该是最常见的异常之一,因此JDK8提供了Optional来避免空指针异常. 首先说明JDK8新增的Optional及相关方法的使用 Optional的常用操作: Option ...

  3. python冷知识

    目录 省略号也是对象 奇怪的字符串 and 和 or 的取值顺序 访问类中的私有方法 时有时无的切片异常 两次 return for 死循环 intern机制 省略号也是对象 在python中一切皆对 ...

  4. 新技术新框架不断涌现，目前学习web前端开发都要掌握什么？

    web前端开发由网页制作演变而来,随着web2.0的发展,网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现 ...

  5. java的运行

    1.打成war包 war需要部署到tomcat中运行. 2.jar包 A 可执行jar包 java -jar some.jar B 普通jar包 java -cp "dir/*" ...

  6. 每日一题 - 剑指 Offer 40. 最小的k个数

    题目信息 时间: 2019-06-30 题目链接:Leetcode tag: 快排 难易程度:中等 题目描述: 输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3. ...

  7. html中绝对路径和相对路径的区别?比较相对路径和绝对路径的优缺点

    绝对路径和相对路径的区别? 1. 绝对路径:就是你的文件或目录在硬盘上的真正的路径例如“bg.jpg”这个图片是存放在硬盘的“E:\img”目录下,那么 “bg.jpg”这个图片的绝对路径就是“E:\ ...

  8. css hack原理及常用hack

    原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注释:适用于[IE5, IE9]常见格式如下 ...

  9. BZOJ1294 洛谷P2566 状态压缩DP 围豆豆

    传送门 题目描述 是不是平时在手机里玩吃豆豆游戏玩腻了呢?最近MOKIA手机上推出了一种新的围豆豆游戏,大家一起来试一试吧游戏的规则非常简单,在一个N×M的矩阵方格内分布着D颗豆子,每颗豆有不同的分值 ...

  10. 返回报文变成xml格式了！

    首先,google chrome之前有安装jsonview插件: 然后,自己弄springCloud项目,搭建eureka后,访问url发现返回报文变成xml格式了,一通摸索及查找,现整理如下: 1. ...