详解Vue.use自定义自己的全局组件


Posted in Javascript onJune 14, 2017

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。

这里我用的webpack-simple这个简单版本的脚手架为例,安装就不??铝耍?苯咏?胝??/p>

首先看下目前的项目结构:

详解Vue.use自定义自己的全局组件

webpack首先会加载main.js,所以我们在main的js里面引入。我以element ui来做对比说明

import Vue from 'vue'
import App from './App.vue'

// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 引入自定义组件。index.js是组件的默认入口
import Loading from '../components/loading'
Vue.use(Loading);

Vue.use(ElementUi);
new Vue({
 el: '#app',
 render: h => h(App)
})

然后在Loading.vue里面定义自己的组件模板

<!-- 这里和普通组件的书写一样 -->
<template>
  <div class="loading">
    loading...
  </div>
</template>

在index.js文件里面添加install方法

import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
  install: function(Vue){
    Vue.component('Loading',MyLoading)
  }
}

// 导出组件
export default Loading

接下来就是在App.Vue里面使用组件了,这个组件已经在main.js定义加载了

<template>
 <div id="app">
 <!-- 使用element ui的组件 -->
 <el-button>默认按钮</el-button>

 <!-- 使用自定义组件 -->
 <Loading></Loading>
 </div>
</template>

下面是效果图

详解Vue.use自定义自己的全局组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
微信小程序联网请求的轮播图
Jul 07 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 #Javascript
微信小程序动态添加分享数据
Jun 14 #Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 #Javascript
JS查找数组中重复元素的方法详解
Jun 14 #Javascript
JS设置手机验证码60s等待实现代码
Jun 14 #Javascript
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 #Javascript
You might like
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
CI框架表单验证实例详解
2016/11/21 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
windows下python和pip安装教程
2018/05/25 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python 实现集合Set的示例
2020/12/21 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
大学生演讲稿范文
2014/01/11 职场文书
小学家长会邀请函
2014/01/23 职场文书
入党自我评价范文
2014/02/02 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
作风建设整改方案
2014/10/27 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫