溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-09-06 09:33:58 來源：腳本之家 閱讀：172 作者：匿名的girl 欄目：web開發(fā)

本文實例講述了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：在子組件中 把要發(fā)送的數據通過觸發(fā)自定義事件傳遞給父組件

this.$emit('customEvent',123)

②$refs

reference 引用

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

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

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

this.$refs.zhangsan

兄弟組件通信

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

var bus = new Vue();

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

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

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

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

每日一練：

創(chuàng)建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>www.jb51.net 小練習</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個組件，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>）
  */
//創(chuàng)建父組件
    Vue.component("main-component",{
      data:function(){
        return {
          count:0,
          isDisabled:true
        }
      },
      methods:{
        //點擊按鈕對count進行自增
        //并通過$emit觸發(fā)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>
      `
    })
//創(chuàng)建子組件
    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.jb51.net/code/HtmlJsRun測試，可得到如下運行效果：

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

感興趣的朋友還可以使用上述在線工具測試一下代碼的運行效果。

希望本文所述對大家vue.js程序設計有所幫助。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手