vue平行組件傳值
- 2019 年 10 月 7 日
- 筆記
平行組件傳值
-
通過平行組件傳值可以實現任何情境下的傳值,包括(父傳子,子傳父)
-
程式碼示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-alex></my-alex> <hr> <my-mjj></my-mjj> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> // 藉助一個空的VUE對象 實現組件之間通訊 let bus = new Vue(); //子組件A let A = { template: ` <div> <h2>這是子組件: my-alex</h2> <p> my-mjj被選中的次數:{{ num }} </p> </div> `, data() { return { num: 0 } }, // 關鍵點 第二步 監聽B組件觸發了xuanwo A就加1 mounted() { //在文檔準備就緒之後就要開始監聽bus是否觸發了xuanwo的事件 /* bus.$on("xuanwo",function(val){ // this.num += 1; console.log(val);// 點擊B 可以跟著加1了 //關鍵點 第三步 怎麼改A裡面的num 的值 console.log(this); //bus對象 不是A }) */ bus.$on("xuanwo",(val)=>{ //把上面的匿名函數改成箭頭函數 // this.num += 1; console.log(val); //點擊B 可以跟著加1了 //關鍵點 第三步 怎麼改A裡面的num 的值 console.log(this); //A組件 this.num = val; }) } }; //子組件B let B = { template: ` <div> <h2>這是子組件: my-mjj</h2> <button v-on:click="add">選我</button> </div> `, data(){ return{ num:0 } }, methods:{ add(){ this.num += 1; // **** 關鍵點第一步 利用bus 對象拋出一個自定義事件 bus.$emit("xuanwo",this.num) } } }; //實例化根組件 let app = new Vue({ el: "#app", data: { totalNum: 0 }, components: { "my-alex": A, "my-mjj": B, } }) </script> </body> </html>
