1全局注册实例

<div id="app">

<com-btn></com-btn>

<com-btn></com-btn>

</div>

<script>

Vue.component('com-btn',{

data:function(){

return{

num:0,

}

},

template:`<button v-on:click='change'>点我{{num}}次</button>`,

methods:{

change:function(){

this.num += 1;

}

}

})

var vm = new Vue({

el:'#app',

data:{

},

})

</script>

我们在注册一个组件的时候需要给他起一个名字比如com-btn,从上面的代码我们可以看见

Vue.component('my-component-name', { /* ... */ })

这个组件名字就是我们注册的这个组件com-btn的第一个参数.这个组件就是全局注册的,在他们注册之后,我们可以用在任何新创建的vue根实例(new Vue)里面。

值得注意的是所有组件必须写在根实例的前面才会生效

2局部祖册的实例

<script>

var childcom ={

data:function(){

return{

num:0,

}

},

template:`<button v-on:click='change'>点我{{num}}次</button>`,

methods:{

change:function(){

this.num += 1;

}

}

}

var vm = new Vue({

el:'#app',

data:{

},

components:{

'com-btn':childcom,//调用这个组件

}

})

</script>

局部注册的好处 就是当你使用的是webpack这样的构建系统时,如果是用全局注册的这种方法注册的组件,那么当你不使用某一个组件的时候,它仍然会存在最终的构建结果之中,这就增加的无谓的js下载。

所以我们可以通过一个简单的js对象来注册组件

var ComponentA = { /* ... */ }

在需要使用这个组件时, 你只需要在你的你的根实例里面去调用这个定义的组件即可。

new Vue({

el: '#app'

components: {

'component-a': ComponentA,

'component-b': ComponentB

}

})

值得注意的是根实例的属性名字是components,千万不要忘记s。组件中的其他属性和实例的一样但是data必须是一个函数。

对于components对象中的每个的属性来说就是自定义组件的名字,属性值就是这个组件的选项对象。

局部注册的组件在其子组件中是不可用的,如果你希望componentA在componentB中可以使用那你需要下面这样写法:

var ComponentA = { /* ... */ }

var ComponentB = {

components: {

'component-a': ComponentA

},

// ...

}

Vue组件之全局组件与局部组件的更多相关文章

  1. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  2. vue组件调用(全局调用和局部调用)

    当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...

  3. Vue学习-组件的基本使用(局部组件)

    目录 示例代码 1.创建组件(构造器对象创建-Vue.extend) 2.注册组件 3.使用组件 4.语法糖创建并注册组件 示例代码 http://jsrun.net/H8vKp/edit 1.创建组 ...

  4. vue(3)—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  5. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  6. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  7. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

  8. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  9. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  10. VueJS组件之全局组件与局部组件

    全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. Windows Server 2016-命令行批量导出AD用户列表信息

    本章节为大家带来如何通过Powershell或ldifde命令行方式导出域用户列表信息,方便大家日常运维工作中使用. Powershell方式导出现有Staff目录下所有用户信息列表: Get-ADU ...

  2. Win10系统盘制作及安装流程

    一.下载最新版的 Win10 镜像 1.打开 MSDN 下载 Windows 系统镜像,即 https://msdn.itellyou.cn/ ​ 2.下载的 iso 镜像文件 ​ 3.你可以通过双击 ...

  3. C# 接口《通俗解释》

    接口 为什么要用接口?好处在哪里? 如果你的工作是一个修水管的,一天客户找上你让你帮装水管,但是有个要求,就是客户喜欢管子是三角形的. 你立马买了三角形的水管回来,在墙上弄个三角形的口子,客户付了钱, ...

  4. MonacoEditor 主动触发代码提示功能

    MonacoEditor是微软提供的代码编辑器 vscode即是使用它作为编辑器. 它的开发语言是ts,可以嵌入到浏览器中. 代码提示或者说代码补全功能是我们经常需要定制的部分. 目前它提供的快捷键是 ...

  5. 日吞吐万亿,腾讯云时序数据库CTSDB解密

    一.背景 随着移动互联网.物联网.大数据等行业的高速发展,数据在持续的以指数级的速度增长,比如我们使用手机访问互网络时的行为数据,各种可穿戴设备上报的状态数据,工厂中设备传感器采集的指标数据,传统互联 ...

  6. VS2017 无法连接到Web服务器“IIS Express”终极解决方案

    今天日了gou了,一大早打开VS2017的时候出现无法连接到Web服务器"IIS Express"的错误,然后必应了一下,再谷歌了一下找到的解决方法也都千篇一律,奈何都没能解决,最 ...

  7. ionic4 混合移动开发 (前世今生)

    ionic 从2016年初识,经历了 ionic2 ionic3.至今 ionic4,终于在2018年7月份发布了测试版. ionic Framework 可以说得上是最接近原生app的ui组件,漂亮 ...

  8. colly源码学习

    colly源码学习 colly是一个golang写的网络爬虫.它使用起来非常顺手.看了一下它的源码,质量也是非常好的.本文就阅读一下它的源码. 使用示例 func main() { c := coll ...

  9. 前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键

    Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能 ...

  10. 数据结构系列(4)之 B 树

    本文将主要讲述另一种树形结构,B 树:B 树是一种多路平衡查找树,但是可以将其理解为是由二叉查找树合并而来:它主要用于在不同存储介质之间查找数据的时候,减少 I/O 次数(因为一次读一个节点,可以读取 ...