平時(shí)在使用Vue框架的業(yè)務(wù)開發(fā)中,組件不僅僅要把模板的內(nèi)容進(jìn)行復(fù)用,更重要的是組件之間要進(jìn)行通信。組件之間通信分為三種:父-子;子-父;跨級組件通信。下面,就組件間如何通信做一些總結(jié)。
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供商洛網(wǎng)站建設(shè)、商洛做網(wǎng)站、商洛網(wǎng)站設(shè)計(jì)、商洛網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、商洛企業(yè)網(wǎng)站模板建站服務(wù),十余年商洛做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
1.父組件到子組件通過props通信
在組件中,使用選項(xiàng)props來聲明需要從父級組件接受的數(shù)據(jù),props的值可以是兩種:一種是字符串?dāng)?shù)組,一種是對象。props中聲明的數(shù)據(jù)與組件data函數(shù)return的主要區(qū)別在于props來自父級,而data中的組件是自己的數(shù)據(jù),作用域是組件本身,這兩種數(shù)據(jù)都可以在模板template及計(jì)算屬性computed和方法methods中使用。如以下例子:
// 父組件 ParentComponent <template> <div class="parent-component"> <h3>這是一個(gè)父組件</h3> <ChildComponent :parentMessage="parentMessage"/> </div> </template> <script> import ChildComponent from './ChildComponent' export default { name: "ParentComponent", data(){ return{ parentMessage:'這是來自父組件的數(shù)據(jù)' } }, components:{ ChildComponent } } </script> // 子組件 ChildComponent <template> <div class="child-component"> <h3>這是一個(gè)子組件</h3> <h4>{{parentMessage}}</h4> </div> </template> <script> export default { name: "ChildComponent", props:["parentMessage"] } </script>
小結(jié):父組件傳遞個(gè)子組件的數(shù)據(jù)可以寫死,也可以用父級的動態(tài)數(shù)據(jù)用v-bind來綁定props的值。
2.子組件到父組件通過$emit,$on通信
當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí),就要用到自定義事件,v-on指令除了監(jiān)聽DOM事件外,還可以用于組件間的自定義事件,Vue組件有一套類似與觀察者模式的一套模式,子組件用$emit()來觸發(fā)事件,父組件用$on()來監(jiān)聽子組件的事件。舉個(gè)例子如下:
// ParentComponent 父組件 <template> <div class="parent-component"> <h3>這是一個(gè)父組件total:{{total}}</h3> <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/> </div> </template> <script> import ChildComponent from './ChildComponent' export default { name: "ParentComponent", data(){ return{ parentMessage:'這是來自父組件的數(shù)據(jù)', total:10, } }, components:{ ChildComponent }, methods:{ getTotal(total){ this.total=total; console.log('ParentComponent total:',total); } } } </script> // ChildComponent 子組件 <template> <div class="child-component"> <h3>這是一個(gè)子組件</h3> <h4>{{parentMessage}}</h4> <button @click="handleAdd10">+10按鈕</button> </div> </template> <script> export default { name: "ChildComponent", props:["parentMessage","total"], methods:{ handleAdd10(){ let total=this.total+10; console.log('ChildComponent $emit:'); this.$emit('handleAdd10',total); } } } </script>
結(jié)果:
上面例子中,子組件有一個(gè)按鈕,實(shí)現(xiàn)加10的效果,子組件通過props項(xiàng)來接收父組件傳入的total值,在改變total后,通過$emit把它傳給父組件,父組件定義事件@handleAdd10方法,子組件$emit()方法第一個(gè)參數(shù)是自定義事件的名稱,后面的參數(shù)是要傳的數(shù)據(jù),對應(yīng)的父組件通過getTotal(total)來接收子組件傳遞的數(shù)據(jù),由此子組件到父組件通信完成。
3.表單子組件到父組件通過v-model來通信(語法糖)
// ParentComponent 改動如下 ** <h3>這是一個(gè)父組件total:{{total}}</h3> <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/> <InputComponent v-model="total"/> ** <script> import InputComponent from './InputComponent' </script> ** // InputComponent 子組件 <template> <input type="text" @input="updateValue($event)"> </template> <script> export default { name: "InputComponent", methods:{ updateValue(evt){ this.$emit('input',evt.target.value) } } } </script>
結(jié)果如下:
以上示例中:因?yàn)樽咏M件的石建明是特殊的input,在使用組件的父級,可以通過v-model來綁定數(shù)據(jù)total,這種實(shí)現(xiàn)方式也可以稱作語法糖,大大減少了父組件代碼量。
4.非父子組件通過中央事件總線(bus)來通信
在vue.js2.x中推薦使用一個(gè)空的Vue實(shí)例作為中央事件總線(bus),先看一個(gè)例子:
// ParentComponent 父組件 <template> <div class="parent-component"> {{message}} <br> <br> <component-a/> </div> </template> <script> import Vue from 'vue' let bus=new Vue(); export default { name: "ParentComponent", data(){ return{ message:'', } }, components:{ componentA:{ template:'<button @click="handleClick">傳遞事件</button>', methods:{ handleClick(){ bus.$emit('on-message','來自子組件component-a的內(nèi)容') } } } }, mounted(){ bus.$on('on-message',(msg)=>{ this.message=msg; }); } } </script>
結(jié)果如下:
以上例子中:首先創(chuàng)建了一個(gè)bus的空Vue實(shí)例,里面沒有任何內(nèi)容,然后全局定義了組件component-a,,在父組件ParentChild的生命周期mounted鉤子函數(shù)中監(jiān)聽來自bus的事件on-message。而在組件component-a中,點(diǎn)擊按鈕會通過bus把事件on-message發(fā)出去,父組件會接受來自bus的事件,改變message的值。
這種方法巧妙輕量的實(shí)現(xiàn)了任何組件之間的通信,包括父子,兄弟,跨級組件。
5.狀態(tài)管理與Vuex與總結(jié)
在實(shí)際業(yè)務(wù)中,經(jīng)常會有跨組件共享數(shù)據(jù)的需求,如果項(xiàng)目不復(fù)雜,使用bus就能簡單的解決問題,但是使用bus在數(shù)據(jù)的管理、維護(hù)、架構(gòu)設(shè)計(jì)上還只是一個(gè)簡單的組件,在大型單頁應(yīng)用,多然開發(fā)的項(xiàng)目中,Vuex能更加優(yōu)雅和高效的完成狀態(tài)管理。
總結(jié)
以上所述是小編給大家介紹的Vue.js組件間通信方式總結(jié)【推薦】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
新聞名稱:Vue.js組件間通信方式總結(jié)【推薦】
標(biāo)題URL:http://bm7419.com/article46/goiseg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、App設(shè)計(jì)、域名注冊、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)