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

一、在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. Canvas干货总结

    一.canvas简介 ​<canvas> 是 html5 新增的,一个可以使用脚本(通常为 javascript) 在其中绘制图像的 html 元素.它可以用来制作照片集或者制作简单的动画 ...

  2. Write a program to copy its input to its output, replacing each string of one or more blanks by a single blank.

    #include <stdio.h> void main() { int c,c_BCN; while((c=getchar())!=EOF) { if(c!=' ') c_BCN=; i ...

  3. java语言基础（七）_继承_super_this_抽象类

    继承 1. 继承概述 2. 继承格式 在继承的关系中,"子类就是一个父类".也就是说,子类可以被当做父类看待. 例如父类是员工,子类是讲师,那么"讲师就是一个员工&quo ...

  4. 分享几个很实用的CSS技巧对前端技术很有帮助

    创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...

  5. 整理一下CSS最容易躺枪的二十规则，大家能躺中几条？

    整理一下CSS最容易躺枪的二十规则,大家能躺中几条? 转载:API中文网 一.float:left/right 或者 position: absolute 后还写上 display:block? 二. ...

  6. 关键字: this的使用

    1.可以调用的结构:属性.方法:构造器2.this调用属性.方法:this理解为:当前对象 或 当前正在创建的对象 2.1 在类的方法中,我们可以使用"this.属性"或" ...

  7. 蓝桥杯大学B组省赛2020模拟赛（一）题解与总结

    题目链接:https://www.jisuanke.com/contest/6516 A:题目: 我们称一个数是质数,而且数位中出现了 5 的数字是有趣的. 例如 5, 59, 457.求1到1000 ...

  8. PCA算法 | 数据集特征数量太多怎么办？用这个算法对它降维打击！

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第27文章,我们一起来聊聊数据处理领域的降维(dimensionality reduction)算法. 我们都知道,图片 ...

  9. 调整数组顺序使奇数位于偶数前面（剑指offer-13）

    方法1:新建两个数组,一个数组用来放奇数,一个数组用来放偶数,最后再把它们合并起来. 1 import java.util.*; 2 public class Solution { 3 public ...

  10. 记一次使用elasticsearch遇到bug的探索过程

    背景: 练习一个小项目,爬取京东的数据,存到ES库中,然后读取ES库中数据,展示到页面上.效果图如下: 涉及两个接口,一个爬取写入ES接口,一个查询展示接口,当我写完代码信心满满准备看看效果的时候,调 ...