非父子元件間的傳值
阿新 • • 發佈：2019-02-06
<!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>
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
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",
})
</script>
</body>
</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
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",
})
</script>
</body>
</html>