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

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. 如何在程序中执行动态生成的Delphi代码

    如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...

  2. dotnet core项目的nuget存储路径

    Where's the package location in aspnet core For project.json the nuget directory is in the user prof ...

  3. QTP学习笔记--define new test object

    目前在测的系统里,有图片控件,图片源都是一样的,链接地址不同(链接地址是动态变化的,不适合作为属性). QTP的识别机制是根据Index来的,复制对象之后更改Index的属性方法无效,采用define ...

  4. mongo大数据量更新服务端超时解决: Cursor not found, cursor id: 82792803897

    mongodb pymongo.errors.CursorNotFound: Cursor not found, cursor id: 82792803897 默认 mongo server维护连接的 ...

  5. Install Apache 2.2.15, MySQL 5.5.34 & PHP 5.5.4 on RHEL/CentOS 6.4/5.9 & Fedora 19-12 [转]

    Step 1: Installing Remi Repository ## Install Remi Repository on Fedora , , , , ## rpm -Uvh http://d ...

  6. 【webpack】webpack之postcss-loader的基本使用---【巷子】

    一.postcss-loader简介 postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后.通过一个额外的 postcss 方 ...

  7. Linux NIO 系列(04-1) select

    目录 一.select 机制的优势 二.select API 介绍与使用 2.1 select 2.2 fd_set 集合操作 2.3 select 使用范例 三.深入理解 select 模型: 四. ...

  8. java性能调优03

    1.java中的四种引用类型(级别由高到低为:强引用,软引用,弱引用和虚引用) 1.1 强引用:默认创建的变量都是强引用,垃圾回收机制不会将其回收,当内存空 间不足,Java虚拟机宁愿抛出OutOfM ...

  9. 嵌套循环结合修改IFS环境变量遍历文件数据中IFS的修改一致性

    以下这个脚本使用了两个不同的IFS值来解析数据.第一个IFS值解析出/etc/passwd文件中的单独的行.内部for循环接着将IFS值改为冒号,云溪你从/etc/passwd的行中解析出单独的值. ...

  10. 初探Remoting双向通信(三)

    原 初探Remoting双向通信(三) 2013年06月25日 17:51:08 喜欢特别冷的冬天下着雪 阅读数 4741 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...