非父子组件传值
2018-08-03 本文已影响0人
椰果粒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件传值（bus/总线/发布订阅模式/观察者模式）</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
总线模式或者vuex进行非父子组件传值。
-->
<div id="app">
<counter content="fjw" ></counter>
<counter content="hkx"></counter>
</div>
<script>
Vue.prototype.bus = new Vue();
var counter = {
props : {
content : {
type : String,
default : "zhangsan"
}
},
data : function(){
return {
selfContent : this.content
}
},
template : '<div @click="handleChildClick">{{selfContent}}</div>',
methods : {
handleChildClick : function(){
// alert(this.content);
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 : "#app",
components : {
counter : counter
}
})
</script>
</body>
</html>
