vue組件間通信全面講解
前言
本章我們將介紹組件間是如何實(shí)現(xiàn)數(shù)據(jù)通信的。包括父組件向子組件、子組件向父組件、兄弟組件、非關(guān)系組件之間的數(shù)據(jù)通信。
組件通信是組件式開發(fā)中非常重要的一部分,也是組件式開發(fā)中的難點(diǎn)。
組件介紹
組件是 vue 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。
我們需要使用特定的方式來(lái)實(shí)現(xiàn)組件間的數(shù)據(jù)通信,接下來(lái)讓我們一個(gè)個(gè)介紹這幾種類別的組件通信是如何實(shí)現(xiàn)的。
一、父?jìng)髯?/h2>
1. 父組件通過(guò) props 傳遞數(shù)據(jù)給子組件
父組件通過(guò) props 屬性向子組件傳遞數(shù)據(jù)。
子組件利用組件實(shí)例的 props 屬性定義組件需要接收的參數(shù),在使用組件時(shí)通過(guò) attribute的方式傳入?yún)?shù)。
// 在子組件內(nèi)定義組件接收一個(gè)參數(shù) name { ? props: ['name'] } // 父組件使用組件時(shí)傳遞參數(shù) name <child :name="name"></child>
接下來(lái)我們看一個(gè)具體示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <parent></parent> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('parent', { template: '<child :name="name"></child>', data() { return { name: '句號(hào)' } } }) Vue.component('child', { template: '<div>{{name}}</div>', props: ['name'] }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
代碼解釋
JS 代碼第 14-18 行:定義了組件 child,并用 props 接收一個(gè)參數(shù) name。
JS 代碼第 4-12 行:定義了組件 parent,在組件中使用 <child></child> 引用組件,并用 attribute 的方式將 name 傳遞給組件 child。
在上面的例子中,組件 Child 接收參數(shù) name,name 可以是字符串、數(shù)組、布爾值、對(duì)象等類型。但有時(shí)候我們需要給接收的參數(shù)指定一個(gè)特殊的類型和默認(rèn)值,接下來(lái)我們就來(lái)介紹一下如何指定 props 的類型和默認(rèn)值。
2. 定義props的類型和默認(rèn)值
在上面的例子中,props 接收一個(gè)組件參數(shù)數(shù)組。
實(shí)際上,props 也可以接收一個(gè)對(duì)象,對(duì)象key為組件接收參數(shù)的參數(shù)名,其值是一個(gè)對(duì)象,屬性 type 用來(lái)指定參數(shù)的類型,屬性 default 用來(lái)指定參數(shù)的默認(rèn)值:
{ props: { name: { type: String, default: '句號(hào)' } } }
接下來(lái)我們看一個(gè)具體示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <parent></parent> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('parent', { template: '<div><child :name="name" /> <child/></div>', data() { return { name: '慕課網(wǎng)' } } }) Vue.component('child', { template: '<div>{{name}}</div>', props: { name: { type: String, default: '句號(hào)' } } }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
JS 代碼第 11-19 行:定義了組件 child,并用 props 接收一個(gè)字符串類型的參數(shù) name,其默認(rèn)值是:句號(hào)。
JS 代碼第 3-10 行:定義了組件 parent,在組件中使用<child></child>兩次引用組件,<child :name="name" /> 的方式傳遞 name 值,<child/> 使用默認(rèn)的 name 值。
TIPS: 注意,給數(shù)組和對(duì)象類型的 props設(shè)置默認(rèn)值的時(shí)候,需要按照以下的寫法:
props: { detail: { type: Object, default: () => { return { name: '句號(hào)' } } }, loves: { type: Array, default: () => { return [] } } }
二、子傳父
子組件通過(guò) $emit 傳遞數(shù)據(jù)給父組件
介紹完父組件傳遞數(shù)據(jù)給子組件的方式,我們?cè)賮?lái)看看子組件是如何傳遞數(shù)據(jù)給父組件的。
子組件通過(guò) $emit 傳遞事件給父組件,父組件通過(guò)$on監(jiān)聽事件:
// 子組件定義事件 this.$emit('事件名稱', '傳遞的參數(shù)') //例: this.$emit('add', 111) // 父組件監(jiān)聽事件的觸發(fā) <child ?@事件名稱="事件觸發(fā)的方法"/>
具體示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <parent></parent> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('parent', { template: '<div><child :name="name" :count="count" @add="add"/></div>', data() { return { name: '句號(hào)', count: 18 } }, methods: { // 父組件通過(guò) @事件名 監(jiān)聽 // count 表示事件觸發(fā)傳遞的參數(shù) add(count) { this.count = count } } }) Vue.component('child', { template: '<div>我是:{{name}}, 我今年 {{count}}歲。<button @click="add">加一歲</button></div>', props: { name: { type: String, default: '句號(hào)' }, count: { type: Number, default: 18 } }, methods: { add(){ // add -> 觸發(fā)的事件名 // this.count + 1 -> 觸發(fā)事件時(shí)傳遞的參數(shù) this.$emit('add', this.count + 1) } } }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
代碼解釋
JS 代碼第 19-38 行:定義了組件 child,該組件接收兩個(gè)參數(shù):1. 字符串類型的 name,默認(rèn)值為:句號(hào)。2. 數(shù)字類型的 age,默認(rèn)值為 18。組件模版中,通過(guò)按鈕點(diǎn)擊事件觸發(fā) add 方法,該方法內(nèi)部通過(guò)$emit觸發(fā)事件 add,并將 age + 1 的值作為參數(shù)傳遞。
JS 代碼第 3-18 行:定義了組件 parent,在組件中使用<child :name="name" :age="age" @add="add"/>引用組件,并綁定 add 事件,當(dāng)事件 add 觸發(fā)時(shí)調(diào)用 methods 中的 add 函數(shù)。
三、非父子組件間數(shù)據(jù)傳遞
前面我們介紹了具有父子關(guān)系的組件是如何進(jìn)行數(shù)據(jù)傳遞的。但實(shí)際上,并不是所有的組件都是父子關(guān)系,組件間還有兄弟組件、子孫組件、無(wú)關(guān)系組件,那么這些組件間是如何進(jìn)行通信的呢?
相信在學(xué)完本章前面的內(nèi)容之后這個(gè)問(wèn)題并不能難倒大家。
- 對(duì)于兄弟組件的數(shù)據(jù)通信:它們有共同的父組件,我們可以通過(guò)父組件傳遞的方式實(shí)現(xiàn)數(shù)據(jù)通信。
- 對(duì)于子孫組件的數(shù)據(jù)通信:可以通過(guò) props 的方式向下逐層傳遞下去,也可以通過(guò) $emit 將事件向上逐層傳遞。
- 對(duì)于非關(guān)系組件的數(shù)據(jù)通信:通過(guò)使用一個(gè)空的Vue實(shí)例作為中央事件總線。
1.通過(guò)公有的父組件進(jìn)行非父子組件間的通信
假設(shè)現(xiàn)在有三個(gè)組件分別是<Parent>、<ChildA>、<ChildB>,其中組件<Parent>是<ChildA>和<ChildB>的父組件,<ChildA>和<ChildB>為兄弟組件,<ChildA>和<ChildB>組件間的通信可以借助<Parent>來(lái)間接傳遞。它的流程大致是這樣:
<ChildA>通過(guò)$emit將數(shù)據(jù)傳遞給<Parent>,<Parent>再通過(guò)props將數(shù)據(jù)傳遞給<ChildB> 。
具體示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <person @modify="modify"></person> <detail :name="name" :count="count"/> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('person', { template: '<div><div>姓名:<input type="text" v-model="name"/></div><div>年齡:<input type="text" v-model="count"/></div><button @click="modify">修改</button></div>', data() { return { name: '句號(hào)', count: 18 } }, methods: { modify() { this.$emit('modify', {name: this.name, count: this.count}) } } }) Vue.component('detail', { template: '<div>我是:{{name}}, 我今年 {{count}}歲。</div>', props: { name: { type: String, default: '句號(hào)' }, count: { type: Number, default: 18 } }, methods: { } }) var vm = new Vue({ el: '#app', data() { return { name: '句號(hào)', count: 18 } }, methods: { modify(detail) { this.name = detail.name this.count = parseInt(detail.count) } } }) </script> </html>
代碼解釋
JS 代碼第 18-30 行:定義了組件 detail,它從父組件接收 name 和 age 兩個(gè)參數(shù)。
JS 代碼第 3-17 行:定義了組件 person,它通過(guò) $emit 將組件內(nèi)輸入的 name 和 age 傳遞給父組件。
JS 代碼第 38-41 行:接收了組件 person 傳遞過(guò)來(lái)的事件,并修改 name 和 age。
HTML 代碼第 3 行:將 name 和 age 傳遞給組件 detail。
2. 通過(guò)使用一個(gè)空的 Vue 實(shí)例作為中央事件總線
在Vue中可以使用 EventBus 來(lái)作為溝通橋梁的概念,就像是所有組件共用相同的事件中心,可以向該中心注冊(cè)發(fā)送事件或接收事件,所以組件都可以上下平行地通知其他組件。
首先我們需要做的是創(chuàng)建事件總線,并將它掛載到Vue原型上,在實(shí)例中通過(guò)this.bus.$emit發(fā)送事件,通過(guò)this.bus.$on接收事件
// 定義事件總線 let bus = new Vue() Vue.prototype.bus = bus // 定義發(fā)送事件 this.bus.$emit('事件名稱', data) // 定義接收事件 并在回調(diào)中接收參數(shù) this.bus.$on('事件名稱', (data) => { })
接下來(lái)我們看一段具體示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <person></person> <detail /> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> let bus = new Vue() Vue.prototype.bus = bus Vue.component('person', { template: '<div><div>姓名:<input type="text" v-model="name"/></div><div>年齡:<input type="text" v-model="count"/></div><button @click="modify">修改</button></div>', data() { return { name: '句號(hào)', count: 18 } }, methods: { modify() { this.bus.$emit('modify', {name: this.name, count: this.count}) } } }) Vue.component('detail', { template: '<div>我是:{{name}}, 我今年 {{count}}歲。</div>', data() { return { name: '句號(hào)', count: 18 } }, mounted() { this.bus.$on('modify', (detail) => { this.name = detail.name this.count = detail.count }) } }) var vm = new Vue({ el: '#app', methods: { } }) </script> </html>
代碼解釋
JS 代碼第 3-4 行:通過(guò) new Vue() 創(chuàng)建一個(gè) vue 實(shí)例,并將它掛載在 Vue 的原型上。這樣,在 vue 組件中可以通過(guò) this.bus 訪問(wèn)到這個(gè)實(shí)例對(duì)象。
JS 代碼第 5-18 行:定義了組件 person,當(dāng)點(diǎn)擊修改按鈕的時(shí)候通過(guò) this.bus.$emit 發(fā)送一個(gè)名為 modify 的事件,并將組件內(nèi)輸入的 name 和 age 作為參數(shù)傳遞。
JS 代碼第 19-33 行:定義組件 detail,在組件內(nèi)部通過(guò)this.bus.$on監(jiān)聽名為 modify 的事件,當(dāng)事件觸發(fā)時(shí)執(zhí)行修改操作。
小結(jié)
在本章,我們介紹了組件間的通信方式,主要有以下知識(shí)點(diǎn):
- 父組件通過(guò) props 向子組件傳遞參數(shù)進(jìn)行數(shù)據(jù)通信;
- 子組件通過(guò) $emit 向父組件傳遞事件進(jìn)行數(shù)據(jù)通信;
- 兄弟組件通過(guò)共同父組件進(jìn)行數(shù)據(jù)通信;
- 通過(guò)使用一個(gè)空的 Vue 實(shí)例作為中央事件總線進(jìn)行非關(guān)系層組件的數(shù)據(jù)通信。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理
這篇文章主要介紹了如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來(lái)設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下2023-10-10VUE中攔截請(qǐng)求并無(wú)感知刷新token方式
這篇文章主要介紹了VUE中攔截請(qǐng)求并無(wú)感知刷新token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個(gè)新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件淺析
v-model在Vue里面是一個(gè)語(yǔ)法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過(guò) 自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件的相關(guān)資料,需要的朋友可以參考下2022-08-08vue在響應(yīng)頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應(yīng)頭response中獲取自定義headers操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07