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 ...
随机推荐
- [b0006] Spark 2.0.1 伪分布式搭建练手
环境: 已经安装好: hadoop 2.6.4 yarn 参考: [b0001] 伪分布式 hadoop 2.6.4 准备: spark-2.0.1-bin-hadoop2.6.tgz 下载地址: ...
- ORACLE基础之oracle锁（oracle lock mode）详解
ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...
- 大数据安全利器ranger 编译安装
ranger大数据领域的一个集中式安全管理框架,它可以对诸如hdfs.hive.kafka.storm等组件进行细粒度的权限控制.本文将介绍部署过程 1. 部署准备 ranger: 进入apa ...
- emacs 窗口控制
1,调整窗口大小 c-c ^ 窗口变高 c-c } 窗口变宽 c-c { 窗口变窄 2,窗口间移动 ;;这一条语句的作用是让 windmove 在边缘的窗口也能正常运作.举个例子,当前窗口已\\ 经是 ...
- vue 表格组件 有事件交互（二）
04==>v-if下面可以嵌套 同级的 v-if 和v-node如下若是第一个v-if没有下面的就不可能显示出来的. <span v-if="!single" @cli ...
- linux so库方式
gcc test_a.c test_b.c test_c.c -fPIC -shared -o libtest.so
- httpd虚拟主机起不来！！
前几天在公司,练习负载均衡配置.在配置虚拟主机的web服务(apache) ,创建好虚拟主机的配置文件 ss -tnl 查看监控端口80已起来,通过本地浏览器访问一直显示默认的欢迎页... 一个下午 ...
- 剑指Offer-9.变态跳台阶(C++/Java)
题目: 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 分析: 假设我们要求跳上第3级的跳法,可以从第0级跳3级台阶到达,也可以从第1级 ...
- 安卓模拟器可访问电脑ip配置
开发的时候,发现安卓模拟器没办法访问调用开发的接口,因为安卓模拟器没有绑定配置hosts,所以需要在模拟器上配置hosts 首先配置环境变量,用户变量的path和系统变量 我的路径 C:\Users\ ...
- 环境变量对于 VS 有什么用？
一.前言 环境变量可以用来组织 VS 工程目录.VS 作为一个 IDE,其天职在于帮开发者组织好工程,主要包括对工程中源文件.库文件的组织.(本质上是提供一个可视化的操作界面,让开发者方便的定义编译器 ...