非父子组件之间传值(Bus/总线/发布订阅模式/观察者模式)

 
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title><link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--使用vuex 或者总线机制来解决非父子组件传值-->
<!--案例说明：点击Dell的时候Lee，当点击Lee的时候Dell 变成Lee
 
两个不相关的组件之间的传递
--><div id="app"><child content="Dell"></child><child content="Lee"></child></div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>Vue.prototype.bus = new Vue()
 
 
    Vue.component('child',{data(){return {
                selfContent: this.content
            }},
        props:{
          content:String
        },
        template:'<div @click="handleClick">{{selfContent}}</div>',
        methods:{handleClick(){
 
                //1.我要把当前this.content传给另一个组件this.bus.$emit('change',this.selfContent)}},mounted(){var this_ = this//2.监听bus中的change时间//3.注意：我们不能修改父组件传过来的值例如content，我们在data中定义属性，把this.content如存入进去，我们来操作这个属性即可this.bus.$on('change',function (msg) {
                this_.selfContent = msg
            })}})let app = new Vue({
        el:"#app",
 
    })
 
</script>
</html>

	<!doctype html>
	<html lang="en">
	<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title><link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
	</head>
	<body>
	<!--使用vuex 或者总线机制来解决非父子组件传值-->
	<!--案例说明：点击Dell的时候Lee，当点击Lee的时候Dell 变成Lee

	两个不相关的组件之间的传递
	--><div id="app"><child content="Dell"></child><child content="Lee"></child></div>
	</body>
	<script src="../node_modules/vue/dist/vue.min.js"></script>
	<script>Vue.prototype.bus = new Vue()


	Vue.component('child',{data(){return {
	selfContent: this.content
	}},
	props:{
	content:String
	},
	template:'<div @click="handleClick">{{selfContent}}</div>',
	methods:{handleClick(){

	//1.我要把当前this.content传给另一个组件this.bus.$emit('change',this.selfContent)}},mounted(){var this_ = this//2.监听bus中的change时间//3.注意：我们不能修改父组件传过来的值例如content，我们在data中定义属性，把this.content如存入进去，我们来操作这个属性即可this.bus.$on('change',function (msg) {
	this_.selfContent = msg
	})}})let app = new Vue({
	el:"#app",

	})

	</script>
	</html>