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& ...
随机推荐
- 【问题】Can't load AMD 64-bit .dll on a IA 32-bit platform
文件下载地址:http://archive.apache.org/dist/tomcat/tomcat-connectors/native/1.2.14/binaries/ 按自己的提示找到32位或者 ...
- Mac os的使用
来北京入职java开发实习,公司标配macook.一开始不会使用macos系统,用起来很不适应,我是拒绝的.但是leader说mac是开发效率最高的工具了·.一开我很怀疑,后来觉得mac系统用起来还真 ...
- 线程的定时器Timer
定时器的作用就是多少秒之后开启一个线程. from threading import Timer def func(): print('函数执行了') Timer(2, func).start() 注 ...
- Github Upload Large File 上传超大文件
Github中单个文件的大小限制是100MB,为了能突破这个限制,我们需要使用Git Large File Storage这个工具,参见这个官方帖子,但是按照其给的步骤,博主未能成功上传超大文件,那么 ...
- JAVA课程课后作业03之动手动脑
一.构造函数 问题一: 错误代码如图: 错误原因:从图片中的编译报错的地方来看,程序是在给新的对象分配空间是出现了问题,因而我们往下观察Foo类,Foo类的构造方法是有一个参数的有参方法,而前面构造新 ...
- Tomcat部署工程需注意的三点
Tomcat部署工程需注意: 1.如果该服务器是第一安装Tomcat,则各位大人应将该Tomcat的解压文件夹 backup 一份,已被不时之用.2.部署时应当注意修改Tomcat安装目录中conf文 ...
- Java语言基础之方法的设计
开发遵循原则之一: DRY原则:Don't Repeat Yourself(不要重复你自己的代码) 原因:重复意味着维护成本的增大 public static void main(String[] a ...
- 图解android开发在界面上显示图片
图解android开发在界面上显示图片<申明:转自百度> <原文章地址:http://jingyan.baidu.com/article/49711c6153a277fa441b7c ...
- js隐藏中间4位，变成‘*’号
var tel = "15222622548"; var reg = /^(\d{3})\d{4}(\d{4})$/; tel = tel.replace(reg, "$ ...
- poi导入excel表格数据到数据库的时候，对出生日期的校验
出生日期格式为8位数字的字符串 如:yyyyMMdd 规则:yyyy大于1900并小于当前时间,月.日 按日期规则校验 //解决读过来的字符串显示为科学计数法问题 BigDecimal bd = ne ...