組件基礎（非父子組件傳值）—Vue學習筆記
阿新 • • 發佈：2019-01-27
cli back change 作用域 src 就是 示例 一行代碼 pla
最近幾天忙著寫Api去了，抽空把後面的內容下出來，然後再分享給大家web可以使用的api。
上次說了父子組件直接的傳值，這次看一下非父子組件之間的傳值（總線機制）
要實現非父子組件之間的傳值非常重要的一行代碼如下
Vue.prototype.young=new Vue();//在Vue實例上掛載一個為young的屬性（指向Vue實例），當然young使隨便取的。
先創建一個基礎框架
<body> <div id="app"> <hello message="YoungAm"></hello> <hellomessage="Hi boy"></hello> </div> </body> <script> Vue.prototype.young=new Vue();//在Vue實例上掛載一個為young的屬性（指向Vue實例） Vue.component("hello",{ template:‘<div>{{message}}</div>‘, props:[‘message‘] }) var app=new Vue({ el:‘#app‘ })</script>
顯示效果如下：
現在我們需要實現點擊一個名字，讓另一個的內容變為點擊的內容。
前面我們給Vue.prototype掛載了一個young現在我們通過這個young來實現非父子組件之間的傳值。
給組件一個點擊事件，通過添加的young來實現向上傳遞事件‘change’並把當前組件的message值傳出去。
mounted為Vue自帶的生命周期鉤子，當組件被掛載時執行。
this.young.$on()用來監聽事件，這裏接受的是組件傳出來的change。
由於執行change事件時this的作用域發生了改變，
所以我們需要在還未改變時給他一個備份。var _this=this;
最後賦值就行了。
<script> Vue.prototype.young=new Vue();//在Vue實例上掛載一個為young的屬性（指向Vue實例） Vue.component("hello",{ template:‘<div @click="handleClick">{{message}}</div>‘, props:[‘message‘], methods:{ handleClick:function(){ this.young.$emit(‘change‘,this.message);//向外觸發事件 } }, mounted:function(){//當組件被掛載時執行 var _this=this;//this作用域發生改變，此處進行存儲為改變的this this.young.$on(‘change‘,function (ms) { _this.message=ms; })//監聽事件 } }) var app=new Vue({ el:‘#app‘ }) </script>
測試結果：
提醒：如果你為開發板會發現這樣一個警告！
這是由於Vue機制引起的。
Vue中規定子組件不得改變父組件的值。
所以我們可以改寫成這樣。
<script> Vue.prototype.young=new Vue();//在Vue實例上掛載一個為young的屬性（指向Vue實例） Vue.component("hello",{ data:function(){ return {selfMessage:this.message} }, template:‘<div @click="handleClick">{{selfMessage}}</div>‘, props:[‘message‘], methods:{ handleClick:function(){ this.young.$emit(‘change‘,this.selfMessage);//向外觸發事件 } }, mounted:function(){//當組件被掛載時執行 var _this=this;//this作用域發生改變，此處進行存儲為改變的this this.young.$on(‘change‘,function (ms) { _this.selfMessage=ms; })//監聽事件 } }) var app=new Vue({ el:‘#app‘ }) </script>
好了，非父子組件的傳值就是這樣，示例簡單，大家可自行練習。
再見，一夢一黃粱。
組件基礎（非父子組件傳值）—Vue學習筆記