详解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 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
php测试kafka项目示例
2020/02/06 PHP
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python实现抖音视频批量下载
2018/06/20 Python
python os模块简单应用示例
2019/05/23 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
公司离职证明范本
2014/01/13 职场文书
土建技术员岗位职责
2015/04/11 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python类方法总结讲解
2021/07/26 Python