详解Vue.use自定义自己的全局组件
作者:22337383 发布时间:2024-05-02 17:02:59
标签:Vue.use,全局组件
通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。
这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题
首先看下目前的项目结构:
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>
下面是效果图
来源:http://www.cnblogs.com/yesyes/p/6658611.html
0
投稿
猜你喜欢
- 前言我们在工作中的时候,会有这种需求:用户上传一个格式固定excel表格到网站上,然后程序负债解析内容并进行处理。我最近在工作中就遇到了,所
- redis无法访问本机真实ip地址1.我在进行用jedis来连接redis时出现了问题:我用Jedis jedis = new Jedis(
- 发现问题 win10默认设置150%,对页面布局的影响靠单纯的自适应是没办法解决的问题出在device-pixel-ratio解决
- 前段时间看到letcode上的元音字母字符串反转的题目,今天来研究一下字符串反转的内容。主要有三种方法:1.切片法(最简洁的一种)#切片法d
- 1、查看数据类型In [11]: arr = np.array([1,2,3,4,5])In [12]: arrOut[12]: array
- Python使用缓存在开发Web应用或分布式系统时,缓存是常见的解决方案之一,它可以大幅提升系统性能。在Python中,我们可以使用内存缓存
- 今天看一个水友说他的MySQL现在变的很慢。问什么情况时。说单表超过2个G的一个MyISAM。真垃圾的回答方式。 &n
- PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数,这些函数都可被称
- 简介网上流传的部分可以百度关键词“Python”和“word”后查看文章学习,以下内容为个人实践,修正了不能运行出错的情况。代码示例impo
- 从物理意义上来讲,InnoDB表由共享表空间文件(ibdata1)、独占表空间文件(ibd)、表结构文件(.frm)、以及日志文件(redo
- 说到排序,我想起一个故事,大意是说唐僧师徒西游美利坚,孙悟空买了本词典,开始逐条背诵单词。他们第一次下美国馆子的时候,不管服务员推荐什么,孙
- 1 深分页问题1.1 创建表CREATE TABLE `player` ( `id` bigint(20) NOT NULL A
- 最近有一个项目,需要检查某个字符型字段的值是否为数字,由于数据行是海量,所以需要通过SQL语句来筛查,这里拿来做个备忘。用到的函数为IsNu
- 原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE
- 本文实例讲述了JS前端加密算法。分享给大家供大家参考,具体如下:解密操作对服务器性能颇有消耗。寻思着能不能在前端完成。于是找到了crypto
- 本文实例为大家分享了python3判断IP地址的具体代码,供大家参考,具体内容如下输入一串字符,判断该字符串是否为点分十进制的IP地址,若是
- 本文实例讲述了PHP面向对象程序设计高级特性。分享给大家供大家参考,具体如下:静态属性<?phpclass StaticExample
- 讲起学生成绩管理系统,从大一C语言的课程设计开始,到大二的C++课程设计都是这个题,最近在学树莓派,好像树莓派常用Python编程,于是学了
- Python Queue模块Python中,队列是线程间最常用的交换数据的形式。Queue模块是提供队列操作的模块,虽然简单易用,但是不小心
- 如何提取JSON数据指定内容假设我们要获取'pic_str'里的数据JSON数据{'err_no': 0,