vue组件局部与全局注册的区别

 

//局部注册

var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.extend()我们将创建一个组件构造器-->

template:"<div>我是局部注册</>"

})

new Vue({

el:"#app",

components:{                 <!--components是实现局部注册的属性-->

"my-component":mycomponent

}

}) <!--这样我们组件就能应用在id=app的标签里面,其他地方不能应用,会报错!

如果想组件在任何地方都能应用,我们就需要注册全局组件-->

//全局注册

var mycomponent  = new extend({

template:"<div>我是全局组件,能在任何地方应用哦</div>"

})

Vue.component("my-compoent",mycomponent)    <!--这样就注册了一个全局组件-->

new Vue({

el:"#app"

})

vue 的全局组件和 局部组件的更多相关文章

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

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

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

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

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

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

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

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

  5. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  6. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  7. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

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

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

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

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

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

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

随机推荐

  1. 对于react中的this.setState的理解

    一.this.setState第二个参数的作用:修改数据更新后最新的DOM结构 二.this.setState为什么是异步的? 1.setState只在合成事件和钩子函数中是“异步”的,在原生事件和s ...

  2. 安装mysql5.6

    1.创建一个不能登录的的用户: 2.下载一个数据库包: wget 下载网址 3.安装相关依赖包: yum -y install make gcc-c++ cmake bison-devel ncurs ...

  3. shell编程(七)之字符串处理

    字符串切片 ${var:offset:number} 取字符串的最右侧几个字符: ${var: -length} 注意: 冒号后必须有一个空白字符 #!/bin/bash var="chen ...

  4. linux下php环境搭建(xampp)

    (迁移自旧博客2017 08 30) 学习一门语言之前需要配置环境,今天我们就将配置php开发环境,为php的后续学习做准备. xampp是一个功能强大的建站集成软件包.这个软件包原来的名字是 LAM ...

  5. 基于卷积神经网络CNN的电影推荐系统

    本项目使用文本卷积神经网络,并使用MovieLens数据集完成电影推荐的任务. 推荐系统在日常的网络应用中无处不在,比如网上购物.网上买书.新闻app.社交网络.音乐网站.电影网站等等等等,有人的地方 ...

  6. PowerShell自定义函数定义及调用

    PowerShell是一种命令集,也有自己的语法定义及函数.本文主要介绍如何自定义powershell函数及如何调用,当初在写PowerShell自定义函数的时候查阅了很多资料都没找到如何调用自定义函 ...

  7. Gradle 简记

    不是 Gradle,就是 Maven吧.对比下: Maven: 推荐(?)了一个默认的项目结构和生命周期,但是太过死板 虽然暴露了 API 接口,但是插件定制太过复杂 和 Ant 一样,仍然无法表达复 ...

  8. Vue-admin工作整理(十一):Vuex-动态注册模块

    概述: 动态注册模块分为两种,一种是在根state下注册一个模块,一种是在模块下再自动注册一个模块 第一种:根state下动态注册模块: 思路:通过store来实现,this.$store来获取当前的 ...

  9. 计算Java对象内存大小

    摘要 本文以如何计算Java对象占用内存大小为切入点,在讨论计算Java对象占用堆内存大小的方法的基础上,详细讨论了Java对象头格式并结合JDK源码对对象头中的协议字段做了介绍,涉及内存模型.锁原理 ...

  10. 【Axure RP8.1】一款专业的快速原型设计工具

    Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写.Axure RP是美国Axur ...