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 ...
随机推荐
- js 常用工具方法
1.格式化字符串 String.prototype.format = function () { let args = arguments; return this.replace(/\{(\d+)\ ...
- 《大话处理器》Cache一致性协议之MESI【转】
转自:https://blog.csdn.net/muxiqingyang/article/details/6615199 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载 ...
- 攻防世界pwn之新手区
涉及的工具有 Ubuntu 16.04 pwntools IDA gdb-peda 1.get_shell 连接就给flag,可以直接用nc连接,然后输入ls查看里面的目录,发现有名字叫flag文件, ...
- 基于 lstm 的股票收盘价预测 -- python
开始导入 MinMaxScaler 时会报错 “from . import _arpack ImportError: DLL load failed: 找不到指定的程序.” (把sklearn更新下) ...
- 2019 SDN上机第三次作业
2019 SDN上机第三次作业 实验一 利用Mininet仿真平台构建如下图所示的网络拓扑,配置主机h1和h2的IP地址(h1:10.0.0.1,h2:10.0.0.2),测试两台主机之间的网络连通性 ...
- win10 去除快捷方式小箭头
@echo off color 2 reg delete HKCR\lnkfile /v IsShortcut /f reg delete HKCR\piffile /v IsShortcut /f ...
- chentos7 安装jdk1.8（二进制安装）
首先下载jdk1.8 去官网下载jdk:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...
- FFT/NTT基础题总结
在学各种数各种反演之前把以前做的$FFT$/$NTT$的题整理一遍 还请数论$dalao$口下留情 T1快速傅立叶之二 题目中要求求出 $c_k=\sum\limits_{i=k}^{n-1}a_i* ...
- [NewLife.XCode]角色权限
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...
- Kubernetes生产架构浅谈
注意 本文,只是笔者针对Kubernetes生产环境运行的一些关于架构设计介绍. 介绍 基于 Kubernetes 系统构建的统一开发运维管控平台.在 Kubernetes 基础上,围绕 微服务系统的 ...