Vue中如何實現(xiàn)組件間通信-創(chuàng)新互聯(lián)

在平時的開發(fā)過程中，父子 / 兄弟組件間的通信是肯定會遇到的啦，所以這里總結(jié)了 6 種 Vue 組件的通信props / $e$emit / Vuex$attrs / $listeners

在哈巴河等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站設計制作、網(wǎng)站建設 網(wǎng)站設計制作定制開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,成都營銷網(wǎng)站建設,外貿(mào)營銷網(wǎng)站建設,哈巴河網(wǎng)站建設費用合理。

  1. $parent / $children 與 ref

  2. provide / inject

前言

Vue中如何實現(xiàn)組件間通信

如上圖所示，A/B，B/C，B/D 組件是父子關(guān)系，C/D 是兄弟關(guān)系。那如何根據(jù)不同的使用場景，選擇不同的通信方式呢？所以前提就是我們要了解不同的通信方式的作用和區(qū)別。

一. props / $emit

這個是我們平時用得比較多的方式之一，父組件 A 通過 props 參數(shù)向子組件 B 傳遞數(shù)據(jù)，B 組件通過 $emit 向 A 組件發(fā)送一個事件（攜帶參數(shù)數(shù)據(jù)），A組件中監(jiān)聽 $emit 觸發(fā)的事件得到 B 向 A 發(fā)送的數(shù)據(jù)。 我們來具體解釋下它的實現(xiàn)步驟：

1：父組件向子組件傳值

// App.vue 父組件
<template>
    <a-compontent :data-a="dataA"></a-compontent>
</template>
<script>
import aCompontent from './components/A.vue';
export default {
    name: 'app',
    compontent: { aCompontent },    
    data () {        
        return {
         dataA: 'dataA數(shù)據(jù)'
       }
    }
}
// aCompontent 子組件
<template>
    <p>{{dataA}}</p> // 在子組件中把父組件傳遞過來的值顯示出來
</template>
<script>export default {
    name: 'aCompontent',
    props: {
        dataA: {           
              //這個就是父組件中子標簽自定義名字            
              type: String,
            required: true  // 或者false
        }
    }
}
</script>

2：子組件向父組件傳值（通過事件方式）

// 子組件
<template>
    <p @click="sendDataToParent">點擊向父組件傳遞數(shù)據(jù)</p>
</template>
<script>export default {
    name: 'child',
    methods:{        
        changeTitle() {
              // 自定義事件，會觸發(fā)父組件的監(jiān)聽事件，并將數(shù)據(jù)以參數(shù)的形式傳遞
            this.$emit('sendDataToParent','這是子組件向父組件傳遞的數(shù)據(jù)'); 
        }
    }
}

// 父組件
<template>
    <child @sendDataToParent="getChildData"></child>
</template>
<script>
import child from './components/child.vue';
    export default {
    name: 'child',
    methods:{
        getChildData(data) {
            console.log(data); // 這里的得到了子組件的值
        }
    }
}
</script>

二. $emit / $on

這種方式是通過一個類似 App.vue 的實例作為一個模塊的事件中心，用它來觸發(fā)和監(jiān)聽事件，如果把它放在 App.vue 中，就可以很好的實現(xiàn)任何組件中的通信，但是這種方法在項目比較大的時候不太好維護。

舉個： 假設現(xiàn)在有 4 個組件，Home.vue 和 A/B/C 組件，AB 這三個組件是兄弟組件，Home.vue 相當于父組件 建立一個空的 Vue 實例,將通信事件掛載在該實例上 -

D.js
import Vue from 'vue'export default new Vue()
// 我們可以在router-view中監(jiān)聽change事件，也可以在mounted方法中監(jiān)聽
// home.vue<template>  <p>    <child-a />    <child-b />    <child-c />  </p></template>
// A組件
<template>
  <p @click="dataA">將A組件的數(shù)據(jù)發(fā)送給C組件 - {{name}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      name: 'Echo'
    }
  },
  components: { Event },
  methods: {    dataA() {
      Event.$emit('data-a', this.name);
    }
  }
}
</script>
// B組件
<template>
  <p @click="dataB">將B組件的數(shù)據(jù)發(fā)送給C組件 - {{age}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      age: '18'
    }
  },
  components: { Event },
  methods: {    dataB() {
      Event.$emit('data-b', this.age);
    }
  }
}
</script>
// C組件
<template>
  <p>C組件得到的數(shù)據(jù) {{name}} {{age}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      name: '',
      age: ''
    }
  },
  components: { Event },  mounted() {
    // 在模板編譯完成后執(zhí)行
    Event.$on('data-a', name => {
      this.name = name;
    })
    Event.$on('data-b', age => {
      this.age = age;
    })
  }
}
</script>

上面的里我們可以知道，在 C 組件的 mounted 事件中監(jiān)聽了 A/B 的 $emit 事件，并獲取了它傳遞過來的參數(shù)（由于不確定事件什么時候觸發(fā)，所以一般在 mounted / created 中監(jiān)聽）

三. Vuex

Vuex 是一個狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。 Vuex 應用的核心是 store（倉庫，一個容器），store 包含著你的應用中大部分的狀態(tài) (state)；

這個部分就不詳細介紹了，官方文檔很詳細了 vuex.vuejs.org/zh/guide/st…

四. $attrs / $listeners

Vue中如何實現(xiàn)組件間通信

如上圖所示，這是一個多級組件的嵌套，那 A/C 組件如何進行通信？我們現(xiàn)在可以想到的有下面幾種方案：

  1. 使用 Vuex 來進行數(shù)據(jù)管理，但是使用的 vuex 的問題在于，如果項目比較小，組件間的共享狀態(tài)比較少，那用 vuex 就好比殺雞用牛刀。
  2. 利用 B 組件做中轉(zhuǎn)站，當 A 組件需要把信息傳給 C 組件時，B 接受 A 組件的信息，然后用 props 傳給 C 組件, 但是如果嵌套的組件過多，會導致代碼繁瑣，代碼維護比較困難;如果 C 中狀態(tài)的改變需要傳遞給 A, 還要使用事件系統(tǒng)一級級往上傳遞 。

在 Vue2.4 中，為了解決該需求，引入了attrs和listeners ， 新增了inheritAttrs 選項。(如下圖所示)

Vue中如何實現(xiàn)組件間通信

$attrs 的作用，某些情況下需要結(jié)合 inheritAttrs 一起使用

有 4 個組件：App.vue / child1.vue / child2.vue / child3.vue，這 4 個組件分別的依次嵌套的關(guān)系。

// App.vue
<template>
  <p id="app">
    <p>App.vue</p><hr>
    // 這里我們可以看到，app.vue向下一集的child1組件傳遞了5個參數(shù)，分別是name / age / job / sayHi / title
    <child1 :name="name" :age="age" :job="job" :say-Hi="say" title="App.vue的title"></child1>
  </p>
</template>
<script>
const child1 = () => import("./components/child1.vue");
export default {
  name: 'app',
  components: { child1 },  data() {    return {
      name: "Echo",
      age: "18",
      job: "FE",
      say: "this is Hi~"
    };
  }
};
</script>
// child1.vue
<template>
  <p class="child1">
    <p>child1.vue</p>
    <p>name: {{ name }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <p>可以看到，$attrs這個對象集合中的值 = 所有傳值過來的參數(shù) - props中顯示定義的參數(shù)</p>
    <hr>
    <child2 v-bind="$attrs"></child2>
  </p>
</template>
<script>
const child2 = () => import("./child2.vue");
export default {
  components: {
    child2
  },
  // 這個inheritAttrs默認值為true，不定義這個參數(shù)值就是true，可手動設置為false
  // inheritAttrs的意義在用，可以在從父組件獲得參數(shù)的子組件根節(jié)點上，將所有的$attrs以dom屬性的方式顯示
  inheritAttrs: true, // 可以關(guān)閉自動掛載到組件根元素上的沒有在props聲明的屬性
  props: {
    name: String // name作為props屬性綁定
  },  created() {
    // 這里的$attrs就是所有從父組件傳遞過來的所有參數(shù) 然后 除去props中顯式定義的參數(shù)后剩下的所有參數(shù)！??！
    console.log(this.$attrs); //  輸出{age: "18", job: "FE", say-Hi: "this is Hi~", title: "App.vue的title"}
  }
};
</script>
// child2.vue
<template>
  <p class="child2">
    <p>child2.vue</p>
    <p>age: {{ age }}</p>
    <p>childCom2: {{ $attrs }}</p>
    <hr>
    <child3 v-bind="$attrs"></child3>
  </p>
</template>
<script>
const child3 = () => import("./child3.vue");
export default {
  components: {
    child3
  },
  // 將inheritAttrs設置為false之后，將關(guān)閉自動掛載到組件根元素上的沒有在props聲明的屬性
  inheritAttrs: false,
  props: {
    age: String
  },  created() {
    // 同理和上面一樣，$attrs這個對象集合中的值 = 所有傳值過來的參數(shù) - props中顯示定義的參數(shù)
    console.log(this.$attrs);
  }
};
</script>
// child3.vue
<template>
  <p class="child3">
    <p>child3.vue</p>
    <p>job: {{job}}</p>
    <p>title: {{title}}</p>
    <p>childCom3: {{ $attrs }}</p>
  </p>
</template>
<script>export default {
  inheritAttrs: true,
  props: {
    job: String,
    title: String
  }
};
</script>

來看下具體的顯示效果：

Vue中如何實現(xiàn)組件間通信

而$listeners怎么用呢，官方文檔說的是：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用！ 從字面意思來理解應該是在需要接受值的父組件增加一個監(jiān)聽事件？話不多說，上代碼

還是 3 個依次嵌套的組件

<template>
  <p class="child1">
    <child2 v-on:upRocket="reciveRocket"></child2>
  </p>
</template>
<script>
const child2 = () => import("./child2.vue");
export default {
  components: {
    child2
  },
  methods: {    reciveRocket() {
      console.log("reciveRocket success");
    }
  }
};
</script>復制代碼
<template>
  <p class="child2">
    <child3 v-bind="$attrs" v-on="$listeners"></child3>
  </p>
</template>
<script>
const child3 = () => import("./child3.vue");
export default {
  components: {
    child3
  },  created() {
    this.$emit('child2', 'child2-data');
  }
};
</script>復制代碼
// child3.vue
<template>
  <p class="child3">
    <p @click="startUpRocket">child3</p>
  </p>
</template>
<script>
export default {
  methods: {    startUpRocket() {
      this.$emit("upRocket");
      console.log("startUpRocket");
    }
  }
};
</script>復制代碼

這里的結(jié)果是，當我們點擊 child3 組件的 child3 文字，觸發(fā) startUpRocket 事件，child1 組件就可以接收到，并觸發(fā) reciveRocket 打印結(jié)果如下：

> reciveRocket success
> startUpRocket

五. $parent / $children 與 ref

  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例
  • $parent / $children：訪問父 / 子實例

這兩種方式都是直接得到組件實例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。

我們先來看個用 ref 來訪問組件的：

// child1子組件
export default {  
        data() {    
            return {
      title: 'Vue.js'
    };
  },
  methods: {    
      sayHello() {
      console.log('child1!!');
    }
  }
};
// 父組件
<template>
  <child1 @click="sayHi" ref="child1"></child1>
</template>
<script>  
export default {
    methods: {      
        sayHi () {
        const child1 = this.$refs.child1;
        console.log(child1.title);  // Vue.js
        child1.sayHello();  // 彈窗
      }
    }
  }
</script>

六. provide/inject

provide/inject 是 Vue2.2.0 新增 API,這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。

由于自己對這部分的內(nèi)容理解不是很深刻，所以感興趣的可以前往官方文檔查看： cn.vuejs.org/v2/api/#pro…

總結(jié)

常見使用場景可以分為三類：

  1. 父子通信：props / $emit；$parent / $children；$attrs/$listeners；provide / inject API； ref
  2. 兄弟通信：Vuex
  3. 跨級通信：Vuex；$attrs/$listeners；provide / inject API

以上就是Vue組件通信的六種方式的詳細內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司其它相關(guān)文章！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站題目：Vue中如何實現(xiàn)組件間通信-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article30/dphpso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、App設計、網(wǎng)站改版、網(wǎng)站排名、Google、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設