《Vue.js前端開發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第7章 Vue組件通信

第7章Vue組件通信組件之間的關(guān)系A(chǔ)組件（父）B組件（子）C組件（子）D組件（孫）E組件（孫）組件間的關(guān)系有:父子關(guān)系:A與B、A與C、B與D、C與E兄弟關(guān)系:B與C隔代關(guān)系(可能隔多代):A與D,A與E非直系親屬關(guān)系:D與EA組件（父）B組件（子）C組件（子）D組件（孫）E組件（孫）父子組件通信、兄弟組件通信、跨級組件通信。數(shù)據(jù)通信父組件向子組件傳參子組件操作父組件的方法傳參slot數(shù)據(jù)分發(fā)provide&inject跨組件傳值router動態(tài)路由傳值vuex全局狀態(tài)管理父子組件通信父子通信Vue提供的技術(shù)Props事件透傳Attributes插槽插槽slot1、父組件向子組件傳模板內(nèi)容（父傳子）

插槽slot插槽slot插槽slot1、父組件向子組件傳模板內(nèi)容（父傳子）

插槽插槽slot內(nèi)容插槽slot出口2、父組件向子組件傳模板內(nèi)容（父傳子）

插槽3、子組件在渲染時將一部分?jǐn)?shù)據(jù)提供給插槽（子傳父）

插槽作用域插槽出口作用域插槽內(nèi)容PropsProperty屬性1、父組件向子組件傳數(shù)據(jù)Propspropsparenttemplate<Child

></Child>

stage="高中":open="true“props<Child>templatescriptsetupdefineProps(['stage‘,'open‘])

<h2>{{stage}}招生報名系統(tǒng)</h2>

<h3v-show='!open'>開放！</h3>透傳Attributes

沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器1、父組件向子組件傳屬性Attributes繼承<MyButton

></MyButton>

class=“l(fā)arge"Attributes<MyButton>template<!--button單個元素為根渲染-->scriptsetup<button>clickme</button>parenttemplateDOM<buttonclass="large">clickme</button><MyButton>當(dāng)一個組件以單個元素為根作渲染時，透傳的attribute會自動被添加到根元素上<script>//使用普通的<script>來聲明選項(xiàng)exportdefault{

inheritAttrs:false}</script>禁用Attributes繼承禁止

attribute會自動被添加到根元素上多個根節(jié)點(diǎn)的組件沒有自動attribute透傳行為1、父組件向子組件傳屬性Attributes繼承<MyButton

></MyButton>

class=“l(fā)arge"Attributes<MyButton>templatescriptsetupparenttemplateDOM<MyButton><divclass="btn-wrapper"><buttonclass="btn"v-bind="$attrs">clickme</button></div>attribute需要應(yīng)用在根節(jié)點(diǎn)以外的其他元素上，可以在模板的表達(dá)式中直接

$attrs

訪問到

<divclass="btn-wrapper"><buttonclass="btnlarge">clickme</button></div>在JavaScript中訪問透傳Attributes<MyButton

></MyButton>

class=“l(fā)arge"Attributesscriptsetup']);parenttemplate<MyButton>import{useAttrs}from'vue'constattrs=useAttrs()console.log(attrs['class']);consolelarge在JS中通過useAttrs()訪問attribute事件事件觸發(fā)與監(jiān)聽子組件中觸發(fā)自定義事件父組件中監(jiān)聽自定義事件事件處理函數(shù)定義在父組件中通過子組件調(diào)用父組件的方法時傳遞參數(shù)子組件傳值給父組件子組件傳值給父組件parenttemplatescriptsetupconstcallback=(value)=>{console.log("父組件的方法");console.log(`${value}`);}

<Child@some-event="callback"></Child>Childscriptsetupconstmsg=ref('hello')template<button@click="$emit('someEvent',msg)">clickme</button>子組件中觸發(fā)自定義事件$emit父組件中監(jiān)聽自定義事件v-on事件處理函數(shù)定義在父組件中camelCase形式命名的事件父組件中kebab-case形式來監(jiān)聽通過子組件調(diào)用父組件的方法時傳遞參數(shù)通過子組件調(diào)用父組件的方法時傳遞參數(shù)子組件傳值給父組件parenttemplatescriptsetupconstcallback=(value)=>{console.log("父組件的方法");console.log(`${value}`);}

<Child@some-event="callback"></Child>Childtemplatescriptsetupconstemit=defineEmits(['someEvent‘])constmsg=ref('hello')constclickHandle=()=>{emit('someEvent',msg.value)}

<<button@click='clickHandle'>clickme</button>觸發(fā)的事件可以顯式地通過defineEmits()來聲明觸發(fā)自定義事件父組件中監(jiān)聽自定義事件v-on事件與V-model父組件子組件數(shù)據(jù)雙向綁定v-modelparenttemplatescriptsetupconsttitle=ref('hello')

<Childv-model:tit="title"></Child>ChildtemplatescriptsetupdefineProps(['tit'])

<p>{{tit}}</p><p><inputtype="text"v-model="tit"@input="$emit('update:tit',$event.target.value)"/></p>觸發(fā)update:tit事件更新父組件v-model綁定的值v-model使用tit作為屬性，并以update:tit作為對應(yīng)的事件parenttemplatescriptsetupconsttitle=ref('hello')

<Childv-model:tit="title"></Child>ChildtemplatescriptsetupdefineProps(['tit'])constemit=defineEmits(['update:tit'])constmsg=ref('world')constchange=()=>{emit('update:tit',msg.value)}

<p>{{tit}}</p><p><button@click="change">改變值</button></p>觸發(fā)update:tit事件更新父組件v-model綁定的值v-model使用tit作為屬性，并以update:tit作為對應(yīng)的事件父組件子組件數(shù)據(jù)雙向綁定v-model3、子組件暴露屬性和方法給父組件defineExpose({})使用<scriptsetup>的組件是默認(rèn)關(guān)閉的，不會暴露任何在<scriptsetup>中的聲明?？梢酝ㄟ^defineExpose編譯器宏來顯式指定暴露在<scriptsetup>中的聲明。parentChildExposescriptsetupconstmsg=ref('子組件暴露的屬性')consthandleClick=()=>{console.log('子組件暴露的方法')}defineExpose({msg,handleClick})子組件中指定暴露的聲明defineExpose()templatescriptsetupconstsub=ref()onMounted(()=>{console.log(sub.value.msg);sub.value.handleClick()})

<ChildExposeref="sub"></ChildExpose>父組件通過模板引用ref獲取子組件的實(shí)例ref()跨級組件通信Provide/Inject跨級組件通信Vue提供的技術(shù)父組件提供Provide后代組件注入Inject一個父組件相對于其所有的后代組件，會作為依賴提供者。任何后代的組件樹，無論層級有多深，都可以注入由父組件提供給整條鏈路的依賴。Inject

Inject

Inject

consttitle=ref('hello')

provide('title',title)

provide('count',100)providetemplatescriptsetupparent<Child>

scriptsetup

consttitle=inject('title')

constcount=inject('count')Inject

{{title}}----------{{count}}templatescriptsetup<Grandson>

consttitle=inject('title')

constcount=inject('count')Inject

{{title}}----------{{count}}父組件中提供provide(‘鍵’,值)后代組件中注入inject(‘鍵’)后代組件中注入inject(‘鍵’)父組件中提供數(shù)據(jù)

import{createApp}from'vue'constapp=createApp(App)vide('message','hellovue!')providetemplatescriptsetupapp

allcomponent

main.js

constmessage=inject(‘message')Inject

{{message}}應(yīng)用內(nèi)的所有組件中都可以注入inject(‘鍵’)在應(yīng)用級別提供的數(shù)據(jù)provide(‘健’,值)在應(yīng)用級別提供數(shù)據(jù)兄弟組件通信第三方包mitt安裝npminstallmitt引入importmittfrom'mitt’使用

EventBus=newmitt()發(fā)信息兄弟組件：觸發(fā)事件EventBus.emit(‘事件名’,信息