4-5 非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）-白红宇的个人博客

发布日期：2021-05-07 10:43:44 浏览次数：22 分类：原创文章

本文共 802 字，大约阅读时间需要 2 分钟。

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）</title>	<script src="vue.js"></script></head><body>	<div id="app">		<chlid content="zhangshan"></chlid>		<chlid content="lishi"></chlid>	</div>	<script type="text/javascript">		//定义bus,所有都可以使用Bus		Vue.prototype.bus=new Vue()		//定义一个子组件		Vue.component('chlid',{			props:{				content:String			},			data:function(){				return {					selfContent:this.content				}			},			template:"<div @click='handleClick'>{  {selfContent}}</div>",			methods:{				handleClick:function(){					this.bus.$emit('change',this.selfContent)				}			},			mounted:function(){				var this_=this				this.bus.$on('change',function(msg){					this_.selfContent=msg				})			}		})		var app = new Vue({			el:'#app',		})	</script></body></html>

上一篇：数据库第7章作业——数据库设计

下一篇：2021-5-3课程——E-R模型练习

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章