vue -全局组件和局部组件
1、全局组件：Vue.component('标签名', 构造器名)
Vue.component('mycpn', cpnC)
注：这种注册组件的方式是全局组件，可以在多个Vue实例中使用。
2、局部组件：components:{标签名,构造器名}
components: {
mycpn: cpnC
}
注：这种注册组件的方式是局部组件，只能在注册这个组件的Vue实例中使用。
*******完整代码******‘
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<mycpn />
</div>
<div id="app2">
<mycpn />
</div> <body>
<script>
const cpnC = Vue.extend({
template: `
<h2>全局组件，可以在多个Vue实例中使用</h2>
`
})
// Vue.component('mycpn', cpnC)
//这种注册组件的方式是全局组件，可以在多个Vue实例中使用。 let vm = new Vue({
el: '#app',
components: {
mycpn: cpnC
}
//这种注册组件的方式是局部组件，只能在注册这个组件的Vue实例中使用。
})
let vm2 = new Vue({
el: '#app2'
})
</script>
</body> </html>
注：实际开发中，只有一个Vue实例，常用的组件是局部组件
vue -全局组件和局部组件的更多相关文章
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
随机推荐
- 设计模式 - Java中单例模式的6种写法及优缺点对比
目录 1 为什么要用单例模式 1.1 什么是单例模式 1.2 单例模式的思路和优势 2 写法① - 饥饿模式 2.1 代码示例 2.2 优缺点比较 3 写法② - 懒惰模式 3.1 代码示例 3.2 ...
- 当时学习《鸟哥的Linux私房菜-基础学习篇》记录的点
1.当执行一个指令的时候,举例来说[ls],系统会依照PATH的设定去每个PATH定义的目录下搜寻文件名为ls的可执行文件,如果在PATH定义的目录中含有多个文件名为ls的可执行文件,那么先搜寻到的同 ...
- web网页利用JavaScript实现对摄像头的调用
实现效果: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- day56_9_20orm中的关键字段，orm查询13方法整合，查询优化和事务。
一.常用字段. 在orm中有一些字段是常用字段: 1.AutoField 这个字段是自增的,必须填入参数primary_key=True,也就是说这个字段是表的主键,如果表类中没有自增列,就会自动创建 ...
- Shiro内置过滤器
Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...
- centos7下安装php-memcached扩展
-> https://blog.csdn.net/sinat_35861664/article/details/72831556 安装扩展进行编译时如果报错,则将 ./configure --w ...
- 金山云笔试题：AKM函数
1. 题目描述 /** 阿克曼(Ackmann)函数 [题目描述] 阿克曼(Ackmann)函数A(m,n)中,m,n定义域是非负整数(m<=3,n<=10),函数值定义为: akm(m, ...
- iOS Workflow 分享 - Create QR Code
上次我分享了一个 Scan QR Code 的 Workflow,这次我分享一个正好相反的.如果我要分享一个 URL(或者是一段非常短的文本)给别人,我就可以用这个 Workflow 来生成 QR C ...
- （四十二）golang--协程之间通信的方式
假设我们现在有这么一个需求: 计算1-200之间各个数的阶乘,并将每个结果保存在mao中,最终显示出来,要求使用goroutime. 分析: (1)使用goroutime完成,效率高,但是会出现并发/ ...
- （三十七）golang--如何获取命令行参数
1.第一种方式 缺点:参数的接收受输入的顺序所影响. 2.第二种方式(使用flag包)