6.5.5Vue组件深入理解--非父子组件间的传值

最新推荐文章于 2020-05-13 21:31:52 发布

ATWLee

最新推荐文章于 2020-05-13 21:31:52 发布

阅读量121

点赞数 1

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/102147023

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

//Vue非父子组件间的传值

<body>
	<div id="app">
		<child content="L"></child>
		<child content="Y"></child>
	</div>

	<script>
		Vue.prototype.bus = new Vue();
		Vue.component('child',{
			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(content){
					this_.selfContent=content;
				})
			}
		})
		var vm = new Vue({
			el: '#app'
		})
	</script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ATWLee

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.5.5Vue组件深入理解--非父子组件间的传值

//Vue非父子组件间的传值<body> <div id="app"> <child content="L"></child> <child content="Y"></child> </div> <script> Vue.prototype.bus = new Vue(); ...
复制链接

扫一扫