初篇 ==============================================================

1. 编写loading组件(components/Loading/index.vue)

<template>
<div>loading</div>
</template> <script>
export default {
name: 'loading'
}
</script>

2.注册为全局组件 (components/Loading/index.js)

import loading from './index.vue'
const loadingOp= {
install: (Vue) => {
Vue.component('loading', loading)
}
}
export default loadingOp

3.定义组件库(components/index.js)

import Model from './Model'
import Loading from './Loading'
export default {
Model,
Loading
}

4.开启全局使用此组件 (main.js)

import componetList from './components'
const { Model, Loading } = componetList
Vue.use(Model).use(Loading)

5. 使用组件

<template>
<loading></loading>
</template>
中篇 ==============================================================

1. 使用组件

1.新建一个plugins文件夹 
2.在文件夹中创建放置全局组件的文件components.js 
3.在components.js文件中引入所有要注册的全局组件 
4.在app.js根实例文件中,引入components.js

import eg from '../components/eg.vue'; export default (Vue)=>{ Vue.component("Eg",eg); }

vue 复习篇. 注册全局组件,和 组件库的更多相关文章

  1. Vue之组件及组件通信

    组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...

  2. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  3. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

  4. vue 注册全局组件

    注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建 ...

  5. vue 中注册全局组件

    1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...

  6. Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  7. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  8. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  9. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

随机推荐

  1. rsync和rsync后台模式

    注意(有软连接的rsync同步,-L可以把软链接里的当普通文件同步.-l 只同步软链接不同步软链接指向的目录或文件) rsync命令详解 rsync -a 归档模式 ,表示以递归方式传输文件,并保持所 ...

  2. 56、salesforce学习笔记(三)

    Date类型 Datetime nowDatetime = Datetime.now(); Datetime datetime1 = Datetime.newInstance(2015,3,1,13, ...

  3. 指向自身类型的成员指针的初始化,this不属于类对象的一部分

    有下面的一个简单的类: class CNullPointCall{public:    static void Test1();    void Test2();    void Test3(int  ...

  4. TTL 与 CMOS

    Frm: https://blog.csdn.net/qq_27745395/article/details/76687175 http://baijiahao.baidu.com/s?id=1598 ...

  5. Linux中TLS

    TLS(Thread Local Storage) 线程局部存储. 在Linux操作系统中,TLS保存成GDT中描述的一个段. 1: /* 2: * This creates a new proces ...

  6. STL中六大组件

    1)容器(Container),是一种数据结构,如list,vector,和deques ,以模板类的方法提供.为了访问容器中的数据,可以使用由容器类输出的迭代器: 容器(container)用于存放 ...

  7. vue.js实现点击后动态添加class及删除同级class

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...

  8. JSON Web Token (JWT),服务端信息传输安全解决方案。

    JWT介绍 JSON Web Token(JWT)是一种开放标准(RFC 7519),它定义了一种紧凑独立的基于JSON对象在各方之间安全地传输信息的方式.这些信息可以被验证和信任,因为它是数字签名的 ...

  9. Hibernate入门教程(一):入门示例(Myeclipse)

    ●项目结构 ●本项目所用Hibernate版本为5.4.5.Final,导入jar只需lib目录下的required和MySQL所需的jar驱动 1.导入相关jar包(配置构建路径) 说明:本人已将所 ...

  10. 如何在有scoped不影响elementUI 的其他页面组件,进行单页面修改的几种方法。

    方式一:内联式css 内联式css , 优点:修改其他方便.缺点:造成页面臃肿,不利于后期维护. 方式二:外链css 外链css ,优点:对其他文件无影响,但会造成多个文件css  (缺点) @imp ...