vue?組件通信的多種方式
前言
在vue中,? 組件的關(guān)系不外乎以下三種:
組件是需要通信的,在開發(fā)中,常用到的通信方式有:vuex、eventBus、以及props與emit、$parent與$children,除此之外,還有provide與inject、$attrs與$listeners等。
一、vuex
這個相信大家用的很多了,簡單回顧一下:
- State:放狀態(tài)的地方
- Mutation:唯一修改狀態(tài)的地方,不支持異步
- Action:通過調(diào)用Mutation中的方法來達到修改狀態(tài)的目的,支持異步
- Getter:可以理解為計算屬性
- Module:模塊,每個模塊擁有自己的 state、mutation、action、getter
簡單的使用這里不贅述,提一下module里面的命名空間。
如果希望你的模塊具有更高的封裝度和復(fù)用性,你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當模塊被注冊后,它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名
這樣,在使用的時候我們就可以這樣用了:
二、eventBus
這個稱為‘事件總線’,簡單看下是怎么使用的:
- 初始化
首先是初始化一個eventBus,可以綁定到vue原型上,也可以綁定到window對象上,還可以抽出來當做一個模塊,在需要的時候再引入。這里直接綁定到vue原型上:
- 創(chuàng)建事件和刪除事件
在需要的組件上創(chuàng)建和刪除事件:
- 觸發(fā)事件
最后就是在需要的地方觸發(fā)事件了
三、props/emit
這個不用多說了,父子通信用的最多的應(yīng)該就是這個了。當然,如果以子組件為跳板,也可以做到祖孫之間通信,不過比較麻煩。不建議這樣操作。
四、$parent/$children
$parent直接訪問的就是父實例,而$children則返回的是實例數(shù)組。所以我一般都是$parent搭配$refs使用。
五、$attrs/$listeners
這兩個可能會用的比較少,來看下官網(wǎng)的介紹:
怎么理解呢,簡單來講就是,$attrs接收除了prop、style、class之外的所有綁定屬性,$listeners則接收除了被.native修飾的所有綁定事件。具體來看下例子:
<template> <div> <p>父組件</p> <input type="text" v-model="formData.inputValue" /> <p>子組件</p> <Son :inputValue="formData.inputValue" :otherValue="otherValue" @success="success" @input.native="handleInput" v-bind="$attrs" v-on="$listeners" ></Son> </div> </template> <script> import Son from "./son.vue"; export default { components: { Son }, provide() { return { father: this.formData, }; }, data() { return { formData: { inputValue: "123", }, otherValue: 999, }; }, methods: { success(data) { console.log(data); }, handleInput() {}, }, }; </script>
<template> <div> <input type="text" v-model="inputValue" @change="handleChange" /> </div> </template> <script> export default { props: { inputValue: String, }, created() { console.log(this.$attrs, "son---$attrs"); console.log(this.$listeners, "son---$listeners"); }, methods: { handleChange() { this.father.inputValue = this.inputValue; }, }, }; </script>
按照之前的理解,$attrs應(yīng)該只能接收到otherValue,$listeners則只能接收到success事件,看下打印結(jié)果:
結(jié)果確實也是這樣的。除此之外,還可傳遞給孫組件:
<template> <div> <input type="text" v-model="inputValue" @change="handleChange" /> <GrandSon v-bind="$attrs" v-on="$listeners"></GrandSon> </div> </template> <script> import GrandSon from "./grandSon.vue"; export default { components: { GrandSon }, props: { inputValue: String, }, created() { console.log(this.$attrs, "son---$attrs"); console.log(this.$listeners, "son---$listeners"); }, methods: { handleChange() { this.father.inputValue = this.inputValue; }, }, }; </script>
<template> <div> <input type="text" v-model="inputValue" @change="handleChange" /> </div> </template> <script> export default { props: { inputValue: String, }, created() { console.log(this.$attrs, "grandSon---$attrs"); console.log(this.$listeners, "grandSon---$listeners"); }, methods: { handleChange() { this.father.inputValue = this.inputValue; }, }, }; </script>
通過這種方式,祖孫之間也實現(xiàn)了通信。
六、provide/inject
provide/inject可以在一個祖先組件中向它的所有后輩組件注入一個依賴,只要上下游關(guān)系成立就能生效。簡單的理解就是provide是注入數(shù)據(jù),inject是獲取數(shù)據(jù)。所以provide是用于父組件,inject是用于子孫組件。provide應(yīng)該是一個對象或者返回一個對象的函數(shù),inject應(yīng)該是一個字符串數(shù)組或者一個對象。官網(wǎng)提到這么一句話:
提示:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而,如果你傳入了一個可監(jiān)聽的對象,那么其對象的 property 還是可響應(yīng)的。
這句話怎么理解呢?字面理解就是你要想在上下游傳遞的那個數(shù)據(jù)是可響應(yīng)的,那么就應(yīng)該以對象的形式傳遞,先試一下以基本數(shù)據(jù)類型的形式傳遞,看下例子:
父組件:
<template> <div> <p>父組件</p> <input type="text" v-model="inputValue" /> <p>子組件</p> <Son></Son> <p>孫組件</p> <GrandSon></GrandSon> </div> </template> <script> import Son from "./son.vue"; import GrandSon from "./grandSon.vue"; export default { components: { Son, GrandSon }, provide() { return { father: this.inputValue, }; }, data() { return { inputValue: "123", }; }, }; </script>
子組件:
<template> <div> <input type="text" v-model="inputValue" @change="handleChange" /> </div> </template> <script> export default { inject: ["father"], data() { return { inputValue: "", }; }, watch: { father(val) { console.log(val, "val"); this.inputValue = val; }, }, created() { console.log(this, "this"); }, methods: { handleChange() { this.father.inputValue = this.inputValue; }, }, }; </script>
在子組件打印this:
可以看到,父組件的inputValue值是被注入到子組件當中的。但卻監(jiān)聽不到這個father。
然后,我們改成以對象的形式進行注入:
<template> <div> <p>父組件</p> <input type="text" v-model="formData.inputValue" /> <p>子組件</p> <Son></Son> <p>孫組件</p> <GrandSon></GrandSon> </div> </template> <script> import Son from "./son.vue"; import GrandSon from "./grandSon.vue"; export default { components: { Son, GrandSon }, provide() { return { father: this.formData, }; }, data() { return { formData: { inputValue: "123", }, }; }, }; </script>
<template> <div> <input type="text" v-model="inputValue" @change="handleChange" /> </div> </template> <script> export default { inject: ["father"], data() { return { inputValue: "", }; }, watch: { 'father.inputValue'(val){ console.log(val, "val"); this.inputValue = val; }, }, created() { console.log(this, "this"); }, methods: { handleChange() { this.father.inputValue = this.inputValue; }, }, }; </script>
這個時候我們看下打印的this以及效果:
這樣就可以實現(xiàn)數(shù)據(jù)的響應(yīng)了。這里有一個點需要注意,如果在父組件中將整個父組件的this注入到后代組件中,在后代組件中是不能通過深度監(jiān)聽來監(jiān)聽這個注入的對象的,會報堆棧溢出的錯誤。所以這里我用的是this.formData
的形式注入。這樣在子孫組件中可以通過'father.inputValue'
這樣的形式監(jiān)聽,也可以通過這樣的形式:
father: { handler(val) { console.log(val); }, deep: true, },
至于為什么會導(dǎo)致這個問題,我們先看下深度監(jiān)聽的實現(xiàn)方式:
這段注釋什么意思呢,簡單理解就是vue是通過遞歸遍歷對象里面的每一個屬性,將是對象的屬性收集起來進行監(jiān)聽。眾所周知,遞歸是很容易引起堆棧溢出的,而看下this對象就不難理解為什么會導(dǎo)致堆棧溢出了(太多了,而且是層層嵌套下去的)。
以上就是Vue組件通信的幾種方式,如果還要在扯一扯,瀏覽器的緩存也可以作為一種手段。。。
到此這篇關(guān)于vue 組件通信的幾種方式的文章就介紹到這了,更多相關(guān)vue 組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3.3?+?TS4構(gòu)建實現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個自主打造媲美?ElementPlus?的組件庫2023-10-10vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03vue3?+?async-validator實現(xiàn)表單驗證的示例代碼
表單驗證可以有效的過濾不合格的數(shù)據(jù),減少服務(wù)器的開銷,并提升用戶的使用體驗,今天我們使用?vue3?來做一個表單驗證的例子,需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06Vue Router的手寫實現(xiàn)方法實現(xiàn)
這篇文章主要介紹了Vue Router的手寫實現(xiàn)方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題
setinterval()是定時調(diào)用的函數(shù),可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01vue3數(shù)據(jù)監(jiān)聽watch/watchEffect的示例代碼
我們都知道監(jiān)聽器的作用是在每次響應(yīng)式狀態(tài)發(fā)生變化時觸發(fā),在組合式?API?中,我們可以使用?watch()函數(shù)和watchEffect()函數(shù),下面我們來看下vue3如何進行數(shù)據(jù)監(jiān)聽watch/watchEffect,感興趣的朋友一起看看吧2023-02-02Vue elementUI 自定義表單模板組件功能實現(xiàn)
在項目開發(fā)中,我們會遇到這種需求,在管理后臺添加自定義表單,在指定的頁面使用定義好的表單,這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12