Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件，在注册组件的简写中就用到了全局组件
//注册组件的简写方式
Vue.component('my-componenta',{
template:'<h2>hello vue</h2>'
});
组件可分为全局组件与局部组件；
全局组件： 在全局API中的Vue.component注册；该项目中所有Vue实例内均可以使用；
局部组件： 在Vue实例中的components选项中注册； 只能在本实例中使用；
现在创建两个Vue实例来进行验证全局与局部的区别：
由图可知全局的可以在定义的所有div中进行调用，但是局部只能在其本身定义好进行调用：
vue代码;
<script>
window.onload= () =>{ //注册组件的简写方式 Vue.component('my-component-a',{ template:'<h2>欢迎来到perfect*的博客园！！！</h2>'
}); new Vue({
el:'#one',
data:{
msg:'' },
components:{
"my-component-b":{
template:'<h2>欢迎来到perfect*的博客园_01</h2>' }
} }); new Vue({
el:'#two',
data:{
msg:'' } }); }
</script>
html:
<div id="one">
<my-component-a></my-component-a><!--全局的-->
<my-component-b></my-component-b><!--局部的--> </div> <div id="two">
<my-component-a></my-component-a><!--全局的-->
<my-component-b></my-component-b><!--局部的--> </div>
也可以进行如下方式来进行使用：
全局组件和局部组件都可以存储数据，但是存储的方式与Vue实例中的data稍有不同； 组件里存储数据，data后需加上函数，数据写在函数体中。
例：以下是在局部组件的data中，定义了name属性；
<script>
window.onload= () =>{ //注册组件的简写方式 Vue.component('my-component-a',{ template:'<h2>{{name}}</h2>', data:function(){
return {
name:'欢迎来到perfect*的博客园！！！'
}
}
}); new Vue({
el:'#one',
data:{
msg:'' },
components:{
"my-component-b":{
template:'<h2>{{name}}</h2>',
data(){
return{
name:'欢迎来到perfect*的博客园_01'
}
} }
} }); new Vue({
el:'#two',
data:{
msg:'abc' } }); }
</script>
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局组件与局部组件</title>
<script type="text/javascript" src="../js/vue.js" ></script> <script>
window.onload= () =>{ //注册组件的简写方式 Vue.component('my-component-a',{ template:'<h2>{{name}}</h2>', data:function(){
return {
name:'欢迎来到perfect*的博客园！！！'
}
}
}); new Vue({
el:'#one',
data:{
msg:'' },
components:{
"my-component-b":{
template:'<h2>{{name}}</h2>',
data(){
return{
name:'欢迎来到perfect*的博客园_01'
}
} }
} }); new Vue({
el:'#two',
data:{
msg:'abc' } }); }
</script>
</head>
<body>
<div id="one">
<my-component-a></my-component-a><!--全局的-->
<my-component-b></my-component-b><!--局部的--> </div> <div id="two">
<my-component-a></my-component-a><!--全局的-->
<my-component-b></my-component-b><!--局部的--> </div>
</body>
</html>
全局组件与局部组件
Vue 组件&组件之间的通信 之全局组件与局部组件的更多相关文章
- vue组件父子之间相互通信案例
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- VueJS组件之全局组件与局部组件
全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
随机推荐
- monit介绍和配置
1.介绍 monit监控和管理进程.程序.文件.目录和Unix系统的文件的工具.可以进行自动维护和修理,在错误的情况下执行有意义的因果关系的行动.比如,某个进程没有运行启动它:没有响应重启它:占用太多 ...
- ssl证书类型
SSL证书依据功能和品牌不同分类有所不同,但SSL证书作为国际通用的产品,最为重要的便是产品兼容性(即证书根预埋技术),因为他解决了网民登录网站的信任问题,网民可以通过SSL证书轻松识别网站的真实身份 ...
- 在VS中为C/C++源代码文件生成对应的汇编代码文件(.asm)
以VS2017为例 然后重新生成工程,在工程目录中就会有对应的汇编代码文件.
- 18 南京 D
裸的最小球覆盖. 坐标范围大一些所以我们把初始的温度也设置的大一些. #include <bits/stdc++.h> using namespace std; typedef long ...
- linux 安装配置nexus以及maven私服应用
---------------------nexus---------------------- 1.编辑nexus脚本, 配置 RUN_AS_USER 参数vi /usr/local/src/nex ...
- JavaScript 运行机制详解
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- Radar Installation---（贪心）
Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 115873 Accepted: 2 ...
- python学习之旅（三）
Python基础知识(2):运算符 一.算术运算符 加 +,减 -,乘 *,除 /,幂 **,求余 %,取整 // 二.成员运算符 in,not in 判断一个字符是否在字符串中 name = &qu ...
- ERP项目实施记录09
今天报价软件测试版本出来了,可看上去不怎么像是一款报价的软件,整个界面上都没有"报价"相关的字眼: 软件标题就不说了,反正影响不大,就当没看见,可左边这一大片菜单里也找不到和报价有 ...
- 公众号对接绑定视频教程<推荐>【申明：来源于网络】
公众号对接绑定视频教程<推荐>[申明:来源于网络] 地址: http://www.456wx.com/bbs/thread-123-1-1.html