非父子组件传值

最新推荐文章于 2022-04-13 14:00:00 发布

qwer12321ck76

最新推荐文章于 2022-04-13 14:00:00 发布

阅读量124

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u012497072/article/details/106263816

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
</head>
<body>
	<div id="app">
		<child id="a" content="Dell"></child>
		<child id="b" content="Lee"></child>
	</div>
	<script>
		<!--给vue组件设置bus总线-->
		Vue.prototype.bus = new Vue()
		
		Vue.component('child', {
			data: function() {
				return {
					selfContent: this.content
				}
			},
			props: {
				content: String
			},
			template: '<div @click="handleClick">{{selfContent}}</div>',
			methods: {
				handleClick: function() {
					this.bus.$emit('change', this.content)
				}
			},
			<!--设置监听change事件-->
			mounted: function() {
				var this_ = this;
				this.bus.$on('change', function(msg) {
					this_.selfContent = msg;
				})
			}
		})
		var app = new Vue({
			el: '#app'
		})
	</script> 
</body>
</html>```