vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)

更新時(shí)間：2018年12月05日 08:47:31 作者：匿名的girl

這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下

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

總結(jié)：

父組件--》子組件

①通過屬性

步驟1：

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

步驟2：

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

②通過$parent

直接在子組件中通過this.$parent得到調(diào)用子組件的父組件

子組件--》父組件

①events up

步驟1：在父組件中調(diào)用子組件的時(shí)候綁定一個(gè)自定義事件和對(duì)應(yīng)的處理函數(shù)

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

步驟2：在子組件中把要發(fā)送的數(shù)據(jù)通過觸發(fā)自定義事件傳遞給父組件

this.$emit('customEvent',123)

②$refs

reference 引用

步驟1：在調(diào)用子組件的時(shí)候可以指定ref屬性

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

步驟2：通過$refs得到指定引用名稱對(duì)應(yīng)的組件實(shí)例

this.$refs.zhangsan

兄弟組件通信

步驟1：創(chuàng)建一個(gè)Vue的實(shí)例作為事件綁定觸發(fā)的公共的對(duì)象

var bus = new Vue();

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

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

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

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

每日一練：

創(chuàng)建2個(gè)組件，main-component,son-component

視圖：

main-component 顯示一個(gè)按鈕
son-component 顯示一個(gè)p標(biāo)簽

功能：

main-component 定義一個(gè)變量count,初始化為0，將count傳遞給son-component,son-component接收到數(shù)據(jù)顯示在p標(biāo)簽中

main-component 在點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)對(duì)count的自增操作，要求son-component能夠?qū)崟r(shí)顯示count對(duì)應(yīng)的數(shù)據(jù)

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

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>www.dhdzp.com 小練習(xí)</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>
  /*
    每日一練：
創(chuàng)建2個(gè)組件，main-component,son-component
視圖：
 main-component 顯示一個(gè)按鈕
 son-component 顯示一個(gè)p標(biāo)簽
功能：
  main-component 定義一個(gè)變量count,初始化為0，將count傳遞給son-component,son-component接收到數(shù)據(jù)顯示在p標(biāo)簽中
  main-component 在點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)對(duì)count的自增操作，要求son-component能夠?qū)崟r(shí)顯示count對(duì)應(yīng)的數(shù)據(jù)
  son-component在接收到count之后，在count大于10的時(shí)候，將main-component的按鈕禁用掉
  （參考：<button v-bind:disabled="!isValid">clickMe</button>）
  */
//創(chuàng)建父組件
    Vue.component("main-component",{
      data:function(){
        return {
          count:0,
          isDisabled:true
        }
      },
      methods:{
        //點(diǎn)擊按鈕對(duì)count進(jìn)行自增
        //并通過$emit觸發(fā)countAdd,并把count的值傳遞給子組件
        //判斷count==10的時(shí)候讓按鈕禁用
        countAdd:function(){
          this.count++;
          console.log("對(duì)數(shù)據(jù)進(jìn)行自增："+this.count);
          this.$emit("countAdd",this.count);
        }
      },
      template:`
        <div>
          <button @click="countAdd" v-bind:disabled="!isDisabled">點(diǎn)我</button>
          <son-component v-bind:myCount="count"></son-component>
        </div>
      `
    })
//創(chuàng)建子組件
    Vue.component("son-component",{
      //通過props接收父組件傳遞過來的值
      props:["myCount"],
      template:`
        <div>
          <p>{{myCount}}</p>
        </div>
      `,
      //數(shù)據(jù)更新完成后判斷從父組件拿到的值
      updated:function(){
        if(this.myCount>10){
          //子組件通過$parent直接獲取父組件的數(shù)據(jù)
            this.$parent.isDisabled = false;
          }
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試，可得到如下運(yùn)行效果：