组件基础（非父子组件传值）—Vue学习笔记
最近几天忙着写Api去了，抽空把后面的内容下出来，然后再分享给大家web可以使用的api。
上次说了父子组件直接的传值，这次看一下非父子组件之间的传值（总线机制）
要实现非父子组件之间的传值非常重要的一行代码如下
Vue.prototype.young=new Vue();//在Vue实例上挂载一个为young的属性（指向Vue实例），当然young使随便取的。
先创建一个基础框架
<body>
<div id="app">
<hello message="YoungAm"></hello>
<hello message="Hi boy"></hello>
</div>
</body>
<script>
Vue.prototype.young=new Vue();//在Vue实例上挂载一个为young的属性（指向Vue实例） Vue.component("hello",{
template:'<div>{{message}}</div>',
props:['message']
}) var app=new Vue({
el:'#app'
})
</script>
显示效果如下：
现在我们需要实现点击一个名字，让另一个的内容变为点击的内容。
前面我们给Vue.prototype挂载了一个young现在我们通过这个young来实现非父子组件之间的传值。
给组件一个点击事件，通过添加的young来实现向上传递事件‘change’并把当前组件的message值传出去。
mounted为Vue自带的生命周期钩子，当组件被挂载时执行。
this.young.$on()用来监听事件，这里接受的是组件传出来的change。
由于执行change事件时this的作用域发生了改变，
所以我们需要在还未改变时给他一个备份。var _this=this;
最后赋值就行了。
<script>
Vue.prototype.young=new Vue();//在Vue实例上挂载一个为young的属性（指向Vue实例） Vue.component("hello",{
template:'<div @click="handleClick">{{message}}</div>',
props:['message'],
methods:{
handleClick:function(){
this.young.$emit('change',this.message);//向外触发事件
}
},
mounted:function(){//当组件被挂载时执行
var _this=this;//this作用域发生改变，此处进行存储为改变的this
this.young.$on('change',function (ms) {
_this.message=ms;
})//监听事件
}
}) var app=new Vue({
el:'#app'
})
</script>
测试结果：
提醒：如果你为开发板会发现这样一个警告！
这是由于Vue机制引起的。
Vue中规定子组件不得改变父组件的值。
所以我们可以改写成这样。
<script>
Vue.prototype.young=new Vue();//在Vue实例上挂载一个为young的属性（指向Vue实例） Vue.component("hello",{
data:function(){
return {selfMessage:this.message}
},
template:'<div @click="handleClick">{{selfMessage}}</div>',
props:['message'],
methods:{
handleClick:function(){
this.young.$emit('change',this.selfMessage);//向外触发事件
}
},
mounted:function(){//当组件被挂载时执行
var _this=this;//this作用域发生改变，此处进行存储为改变的this
this.young.$on('change',function (ms) {
_this.selfMessage=ms;
})//监听事件
}
}) var app=new Vue({
el:'#app'
})
</script>
好了，非父子组件的传值就是这样，示例简单，大家可自行练习。
再见，一梦一黄粱。
组件基础（非父子组件传值）—Vue学习笔记的更多相关文章
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件和非父子组件传值问题
父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...
- React 父子组件和非父子组件传值
零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
随机推荐
- 2019.01.13 bzoj4137: [FJOI2015]火星商店问题（线段树分治+可持久化01trie）
传送门 题意:序列上有nnn个商店,有两种事件会发生: sss商店上进购标价为vvv的一个物品 求编号为[l,r][l,r][l,r]之间的位置买ddd天内新进购的所有物品与一个数xxx异或值的最大值 ...
- 2018.10.25 bzoj4565: [Haoi2016]字符合并（区间dp+状压）
传送门 当看到那个k≤8k\le 8k≤8的时候就知道需要状压了. 状态定义:f[i][j][k]f[i][j][k]f[i][j][k]表示区间[i,j][i,j][i,j]处理完之后的状态为kkk ...
- Linux下移植QT(2)---移植QT
准备:ubantu12.04 内核 3.0.8(最好用同样的内核,3.2.0时没成功) 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc-4.4.6 QT版本5.4.2 ...
- Win7 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6
书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...
- C/C++中static,const,inline三种关键字详细总结
一.关于staticstatic 是C++中很常用的修饰符,它被用来控制变量的存储方式和可见性,下面我将从 static 修饰符的产生原因.作用谈起,全面分析static 修饰符的实质. static ...
- Unable to fetch some archives ,maybe run apt-get update or try with --fix-missing?
今天在liunx下要解压zip包时,发现系统里面没有装unzip包,于是就运行sudo apt-get install unzip,可是总是没办法安装,于是上网找原因,有的说源文件需要修改,于是就运行 ...
- vue中的前置守卫
前置守卫是为了验证用户信息真实性,一些内容只能在用户登陆以后才能进行查看,例如个人中心,我的购物车,等个人页面,非隐私页面 用router.beforeEach进行验证,这个方法必须写在router实 ...
- linux上搭建solr（用jetty部署）
环境搭建:centos7及solr7版本 描述:最新版本的solr内置了jetty容器,可以支持jetty部署,从而不需要发布到tomcat下面 首先同样先在/usr/local/mypackage上 ...
- 笔记：使用mailto在网页中链接Email地址
<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件.我们还可以利用mailto做许多其它事情.下面一一进行讲解,请看详细图示: 注意:如 ...
- js 数组操作函数有：push，pop，join，shift，unshift，slice，splice，concat
(1)push 和 pop 这两个函数都是对数组从尾部进行压入或弹出操作.push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度.注意如果参数也是数组的话,则是将全部 ...