vue如何使用总线机制解决非父子组件传值的情况

最新推荐文章于 2022-06-08 10:33:46 发布

三更村落

最新推荐文章于 2022-06-08 10:33:46 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/guochao8/article/details/85223807

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件传值(Bus/总线、发布订阅模式/观察者模式)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>

	<script>

		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.selfContent)
				}
			},
			mounted: function() {
				var _this = this
				this.bus.$on('change',function(msg) {
					_this.selfContent = msg
				})
			}
		})
		var vm = new Vue({
			el: '#root'
		})
	</script>
	
</body>
</html>

个人博客：jilezhainanshe.com