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& ...
随机推荐
- GO语言-基础语法：变量定义
package main import ( "fmt" ) //不在函数内的变量,属于包内的变量.不能使用":="进行定义和赋值 var ( bb = cc = ...
- php数组函数大全
一.数组操作的基本函数 数组的键名和值 array_values($arr);获得数组的值 array_keys($arr);获得数组的键名 array_flip($arr);数组中的值与键名互换(如 ...
- map里面的set方法
let a=[1,2,3,4,1,2,3,4,1,4];let b= new Set(a);console.log(b) 还有add方法介绍下: let a=new Set();let b=[1,1, ...
- 再读vue2.0
玩过一段时间后在来读读vue2.0会发现受益良多 概述: vue2.0 是一套构建用户界面的渐进式框架, 使用virtual DOM 提供了响应式和组件化, 允许使用简介的模板语法来声明式的将数据渲 ...
- 已知长度为n的线性表采用顺序结构，写一算法删除该线性表中所有值为item的元素
/** * @author:(LiberHome) * @date:Created in 2019/2/27 23:34 * @description: * @version:$ */ /*已知长度为 ...
- ERP项目实施记录10
好久没有更新,因为进度一直拖着.已经实施了20个月了,很多东西没有开发出来.原因多方面的,虽然在此打算吐槽一下开发公司,但其实很大部分责任还是在我们自己. 不多说了,看图:
- python全栈开发 * 19 面向对象 知识点汇总 * 180701
19 面向对象初识2 一.类的名称空间1.对象的名称空间对象的名称空间中有类对象指针,对象可以通过"类对象指针"找类中的"静态变量"(静态字段),也可以用对象找 ...
- [daily][mathematica][fcitx] mathematica 无法输入中文的问题
mathematica无法输入中文, 我的输入法使用 fcitx 于是我给fcitx的作者提了issue https://github.com/fcitx/fcitx/issues/372 数日之后, ...
- 部署WEB项目到服务器（三）安装mysql到linux服务器（Ubuntu）详解
突发奇想,想在自己电脑上部署一个web网站. 1,首先是下载一个适合自己已安装服务器版本的mysql数据库. 这里使用网上的链接http://dev.mysql.com/downloads/mysql ...
- 《Mysql 分区分表》
一:分区/分表 为了什么? - 当MySQL单表的数据量过大时,数据库的访问速度会下降,需要处理大量数据,所以需要把数据分散存储. - 常用 "水平" 切分 二:MySQL常见的水 ...