vue組件之間通信實例總結(點贊功能)

2019-11-19 12:24:28

字體：大中小

來源：轉載

供稿：網友

本文實例講述了vue組件之間通信。分享給大家供大家參考，具體如下：

總結：

父組件--》子組件

①通過屬性

步驟1：

<son myName="michael" myPhone='123'></son><son :myName="userList[0]"></son>

步驟2：

Vue.component('son',{　　props:['myName','myPhone']})

②通過$parent

直接在子組件中通過this.$parent得到調用子組件的父組件

子組件--》父組件

①events up

步驟1：在父組件中調用子組件的時候綁定一個自定義事件和對應的處理函數

methods:{　　recvMsg:function(msg){　　//msg就是傳遞來的數據　　}}，template:'<son @customEvent="recvMsg"></son>'

步驟2：在子組件中把要發送的數據通過觸發自定義事件傳遞給父組件

this.$emit('customEvent',123)

②$refs

reference 引用

步驟1：在調用子組件的時候可以指定ref屬性

<son ref='zhangsan'></son>

步驟2：通過$refs得到指定引用名稱對應的組件實例

this.$refs.zhangsan

兄弟組件通信

步驟1：創建一個Vue的實例作為事件綁定觸發的公共的對象

var bus = new Vue();

步驟2：在接收方的組件綁定自定義的事件

bus.$on('customEvent',function(msg){　　//msg是通過事件傳遞來的數據 (傳遞來的123)});

步驟3：在發送方的組件觸發自定義的事件

bus.$emit('customEvent',123);

每日一練：

創建2個組件，main-component,son-component

視圖：

main-component 顯示一個按鈕
son-component 顯示一個p標簽

功能：

main-component 定義一個變量count,初始化為0，將count傳遞給son-component,son-component接收到數據顯示在p標簽中

main-component 在點擊按鈕時，實現對count的自增操作，要求son-component能夠實時顯示count對應的數據

son-component在接收到count之后，在count大于10的時候，將main-component的按鈕禁用掉
（參考：<button v-bind:disabled="!isValid">clickMe</button>）

<!doctype html><html> <head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com 小練習</title>  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script> </head> <body> <div id="container">    <p>{{msg}}</p>    <main-component></main-component>  </div>  <script>  /*    每日一練：創建2個組件，main-component,son-component視圖： main-component 顯示一個按鈕 son-component 顯示一個p標簽功能：  main-component 定義一個變量count,初始化為0，將count傳遞給son-component,son-component接收到數據顯示在p標簽中  main-component 在點擊按鈕時，實現對count的自增操作，要求son-component能夠實時顯示count對應的數據  son-component在接收到count之后，在count大于10的時候，將main-component的按鈕禁用掉  （參考：<button v-bind:disabled="!isValid">clickMe</button>）  *///創建父組件    Vue.component("main-component",{      data:function(){        return {          count:0,          isDisabled:true        }      },      methods:{        //點擊按鈕對count進行自增        //并通過$emit觸發countAdd,并把count的值傳遞給子組件        //判斷count==10的時候讓按鈕禁用        countAdd:function(){          this.count++;          console.log("對數據進行自增："+this.count);          this.$emit("countAdd",this.count);        }      },      template:`        <div>          <button @click="countAdd" v-bind:disabled="!isDisabled">點我</button>          <son-component v-bind:myCount="count"></son-component>        </div>      `    })//創建子組件    Vue.component("son-component",{      //通過props接收父組件傳遞過來的值      props:["myCount"],      template:`        <div>          <p>{{myCount}}</p>        </div>      `,      //數據更新完成后判斷從父組件拿到的值      updated:function(){        if(this.myCount>10){          //子組件通過$parent直接獲取父組件的數據            this.$parent.isDisabled = false;          }      }    })    new Vue({      el:"#container",      data:{        msg:"Hello VueJs"      }    })  </script> </body></html>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試，可得到如下運行效果：