非父子元件間的傳值

依米_發表於2018-05-16
元件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子元件的傳值（bus/匯流排、釋出者訂閱模式、觀察者模式</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--兄弟之間的關係如何進行傳值呢 把上面的dell傳給下面的li  通過匯流排傳遞-->
<child content="dell"></child>
<child content="li"></child>
</div>
<script>
Vue.prototype.bus = new Vue()//每呼叫Vue例項都會含有bus屬性,bus是vue的例項
Vue.component('child',{
props:{
content:String
//引數校驗
},
template:'<div @click="handleClick">{{content}}</div>',
methods:{
handleClick:function  () {
// alert(this.content);把彈出的內容傳遞出去


//$emit 裡的引數第一個是事件名,第二個是傳遞的東西 emit來傳遞
this.bus.$emit('change',this.content)
}
},
mounted:function  () {//宣告週期鉤子函式來  監聽傳來的資料 on來監聽bus觸發的時間
var this_ = this 
this.bus.$on('change',function  (msg) {
this_.content = msg
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",

})
</script>
</body>

</html>

上面的值傳給下面，但是報錯了，以內牆改了父元件傳來的值，所以要定義data函式在子元件裡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子元件的傳值（bus/匯流排、釋出者訂閱模式、觀察者模式</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--兄弟之間的關係如何進行傳值呢 把上面的dell傳給下面的li  通過匯流排傳遞-->
<child content="dell"></child>
<child content="li"></child>
</div>
<script>
Vue.prototype.bus = new Vue()//每呼叫Vue例項都會含有bus屬性,bus是vue的例項
Vue.component('child',{
data:function(){
return{
selfContent:this.content
}
},
props:{
content:String
//引數校驗
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function  () {
// alert(this.content);把彈出的內容傳遞出去


//$emit 裡的引數第一個是事件名,第二個是傳遞的東西 emit來傳遞
this.bus.$emit('change',this.selfContent)
}
},
mounted:function  () {//宣告週期鉤子函式來  監聽傳來的資料 on來監聽bus匯流排觸發的事件
var this_ = this 
this.bus.$on('change',function  (msg) {
this_.selfContent = msg
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",

})
</script>
</body>
</html>

相關文章