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. git cherry-pick 的使用

    之前和同事在不同的分支开发一个功能的不同模块,在自己分支有用到同事分支的一些实现,被老大告诉用git cherry-pick来搞定! git cherry-pick  能够把另一个分支的一个或多个提交 ...

  2. Gradle Repository

    // 该init.gradle文件,请保存到${USER_HOME}/.gradle/文件夹下,如:C:\Users\Administrator\.gradle allprojects { repos ...

  3. ORA-00338

    dg环境从库报错:ORA-00338: log 5 of thread 1 is more recent than control fileORA-00312: online log 5 thread ...

  4. Gradle构建多模块项目

    通常我在使用Maven构建项目的时候是将应用项目划分为多个更小的模块. Gradle 项目也拥有多于一个组件,我们也将其称之为多项目构建(multi-project build). 我们首先创建一个多 ...

  5. Linux操作系统中系统调用接口

    进程控制 fork 创建一个新进程 clone 按指定条件创建子进程 execve 运行可执行文件 exit 终止进程 _exit 立即终止当前进程 getdtablesize 进程所能打开的最大文件 ...

  6. 使用telnet进行Dubbo接口测试

    telnet进入dubbo 查看pid $ jps -l 26048 org.apache.catalina.startup.Bootstrap 12388 org.jetbrains.jps.cmd ...

  7. 编码原则 之 Stable Dependencies

    The Stable Dependencies Principle states that “The dependencies between software packages should be ...

  8. 意外get接近完美的黑苹果 (UEFI + GPT)

    本人大学生一枚,对于高大上的 MAC OS 只能是摸摸口袋 咽咽口水啦.听说黑苹果,就是安装在普通的 pc 上的 MAC系统,那么对应的苹果电脑上的 MAC OS 系统就为白苹果了. 个人也想啃一口黑 ...

  9. _spellmod_base

    技能基础修改(进去可能会改动) 可以配合数据库的spell_dbc在线制作无补丁技能. 具体效果查询DBC表 `spellid` int(11) NOT NULL DEFAULT '0', `Effe ...

  10. docker笔记(3) ------Django项目的docker部署

    2019-01-12   14:23:18 django容器连接到mysql_server容器分析:原myblog项目使用sqlit3数据库,使用mysql容器前需要在django中加入pymysql ...