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 ...
随机推荐
- Linux-TCP之深入浅出send和recv【转】
转自:https://www.cnblogs.com/JohnABC/p/7238417.html 内容摘自:TCP之深入浅出send和recv.再次深入理解TCP网络编程中的send和recv 建议 ...
- java下实现压缩数据存取
使用Apache Commons Compress实现压缩数据存取,支持格式有XZ,7z,tar,zip,jar,bzip2,gzip等. 例子在 https://commons.apache.org ...
- mysql 高级查询二
各种showshow columns from my_student;show grants for root;show aviables;show processlist;show table st ...
- miniapp之登录、授权和支付
微信小程序代码实现(登录.授权和支付) ==整体流程看上一篇博客,或者去微信公众平台查看文档== ==只列出核心代码,详细代码见码云michaelben== 登录 // //小程序端 // app.j ...
- 20191028 牛客网CSP-S Round2019-1
花了 \(30min\) 打了 \(180\) 分的暴力... 仓鼠的石子游戏 问题描述 链接:https://ac.nowcoder.com/acm/contest/1100/A 仓鼠和兔子被禁止玩 ...
- NOIP201310华容道
题目描述 Description 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少需要多少时 ...
- 【BZOJ4556】[TJOI2016&HEOI2016] 字符串（后缀自动机+线段树合并+二分）
点此看题面 大致题意: 给你一个字符串\(s\),每次问你一个子串\(s[a..b]\)的所有子串和\(s[c..d]\)的最长公共前缀. 二分 首先我们可以发现一个简单性质,即要求最长公共前缀,则我 ...
- react、less、antd-mobile 报错Inline JavaScript is not enabled. Is it set in your options?
增加less-loader里面的配置.如图或者降级less到2.x版本
- Java 未来行情到底如何，来看看各界人士是怎么说的
这是黄小斜的第102篇文章 作者 l 黄小斜 来源 l 公众号[程序员黄小斜](ID:AntCoder) 转载请联系作者(wx_ID:john_josh) Java从出生到现在已经走过了 20 多个年 ...
- Ubuntu中如何使得程序在后台运行
Ubuntu中如何使得程序在后台运行 一.前言 在Ubuntu中有的程序启动需要执行改程序./bin目录下的文件,并且启动之后这个shell就不能使用和关闭了,非常的麻烦,因此就有了相应的命令来解决这 ...