初识 Vue（18）---（非父子组件间的传值）
生活随笔
收集整理的這篇文章主要介紹了
初识 Vue（18）---（非父子组件间的传值）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
非父子組件間的傳值
常一個應用會以一棵嵌套的組件樹的形式來組織：將一個大組件進行拆分
下圖這種情況的組件間傳值（父子組件間傳值）
方法：父組件通過?Props 向子組件傳值，子組件通過事件觸發向父組件傳值
下圖這種情況的組件間傳值（父子組件間隔代傳值，也是非父子組件間傳值）
方法：將第二層作為中間層，父組件（1）通過?Props 向子組件（2）傳值，父組件（2）通過?Props 向子組件（3）傳值，
子組件（3）通過事件觸發向父組件（2）傳值；?子組件（2）通過事件觸發向父組件（1）傳值；
下圖這種情況的組件間傳值（非父子組件間傳值）
參照上面的方法，也可以將第1層、第2層作為中間層來實現傳值，原理上可行；但極其復雜...
解決非父子組件間傳值方法：1.Vue 官方提供的 Vuex 框架? ? 2.發布訂閱模式（總線機制 / Bus / 觀察者模式）
案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>非父子組件間的傳值</title><script src="./vue.js"></script> </head> <body><div id="root"><child content="Dell"></child><child content="Lee"></child></div> <script>Vue.component('child',{props:{content:String},template:'<div>{{content}}</div>',})var vm = new Vue({el:'#root',})</script> </body> </html>輸出：
功能：點擊 Dell 時，下面的 Lee 也變成 Dell ; 點擊 Lee,上面的 Dell 也會變為 Lee;(非父子組件間傳值)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>非父子組件間的傳值</title><script src="./vue.js"></script> </head> <body><div id="root"><child content="Dell"></child><child content="Lee"></child></div> <script>//在 Vue類上掛載 bus屬性，每一個Vue的實例上都會有bus屬性Vue.prototype.bus = new Vue()Vue.component('child',{//子組件的 data 一定是個函數data:function(){ //單項數據流return{ selfContent: this.content}},props: {content:String},template:'<div @click="handleClick">{{content}}</div>',methods:{handleClick:function(){this.bus.$emit('change',this.selfContent)//觸發 change 事件且攜帶數據(content)}},//監聽 Bus 的改變mounted:function(){var this_ = this //為解決作用域發生變化，需保持 thisthis.bus.$on('change',function(msg){this_.selfContent = msg})}})var vm = new Vue({el:'#root',})</script> </body> </html>輸出：（bus 總線來進行非父子組件間的傳值）
??
總結
以上是生活随笔為你收集整理的初识 Vue（18）---（非父子组件间的传值）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c#securityexception不
- 下一篇： html5倒计时秒杀怎么做,vue 设