第一步 在main.js里面 引入需要注册的组件例如：

//引入组件

import header from  './components/header.vue'

import footer from './components/footer.vue'

// 注册全局组件

Vue.component('headerVue',header);

Vue.component('footerVue',footer);

第二步使用组件

在app.vue里面

<headerVue></headerVue>

<footerVue></footerVue> 或者以驼峰式写法调用

<header-vue></header-vue>

<footer-vue></footer-vue>

vue 全局组件的注册的更多相关文章

  1. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  2. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  3. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  4. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  5. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  6. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  7. Vue 全局组件

    全局注册的组件可以在其他组件内直接使用,它在整个Vue实例中都是全局有效的. 非单文件组件中使用 Vue.component('student-list', { template: ` <div ...

  8. vue 全局组件【原】

    1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...

  9. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

随机推荐

  1. 值得网页设计师&前端收藏的实用工具列表

    原文地址:http://www.uisdc.com/tool-list-web-developers# 无论你是经验丰富的前端,还是刚刚起步的设计师,这些为真正的网页设计师和开发者所准备的实用工具.在 ...

  2. rpm安装总结(转载)

    转自:http://www.cnblogs.com/nuke/archive/2009/03/03/1402067.html 在RedHat Linux和Mandrake等兼容RedHat的发行版中, ...

  3. ARC102 C~D

    C: 枚举中间点,计算两边点差值,把个数乘起来即可 #include<iostream> #include<cstdio> #include<algorithm> ...

  4. [浏览器美化]去除 Firefox 当前选中标签页顶端的线条

    Firefox 当前选中的标签页的最上方会显示有一条线,我觉得很丑,如图: 在地址栏输入 about:support ,然后点击打开目录. 在此目录中创建一个 chrome 文件夹(若没有),然后进入 ...

  5. Android项目通过Android Debug Database实时查看本地Sqlite数据库内容

    前几天写Android项目时,想和Sqlyog那样图形化查看数据库中的文件,由于Android自带小型的Sqlite轻量级数据库,在查找方法时发现了一个特别简单适用的方法,纪录一下. 在android ...

  6. flask框架路由系统

    flask框架的url系统: flask框架的路由系统: flask框架的路由系统使用实例化的route方法来指定: 如: @app.route('/') route函数装饰器可以把一个函数绑定到对应 ...

  7. hdu 4565 So Easy! (共轭构造+矩阵快速幂)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4565 题目大意: 给出a,b,n,m,求出的值, 解题思路: 因为题目中出现了开根号,和向上取整后求 ...

  8. TSP+Floyd BestCoder Round #52 (div.2) 1002 Victor and Machine

    题目传送门 题意:有中文版的 分析:(出题人的解题报告)我们首先需要预处理出任意两个国家之间的最短距离,因为数据范围很小,所以直接用Floyd就行了.之后,我们用f[S][i]表示访问国家的情况为S, ...

  9. 题解报告：poj 2503 Babelfish（map）

    Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...

  10. Android推送服务(1)几种实现方式

    1.几种常见的解决方案实现原理 1)轮询(Pull)方式:应用程序应当阶段性的与服务器进行连接并查询是否有新的消息到达,你必须自己实现与服务器之间的通信,例如消息排队等.而且你还要考虑轮询的频率,如果 ...