Vue3父子組件間通信和組件間雙向綁定怎么實(shí)現(xiàn)
本篇內(nèi)容主要講解“Vue3父子組件間通信和組件間雙向綁定怎么實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3父子組件間通信和組件間雙向綁定怎么實(shí)現(xiàn)”吧!
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了蘆溪免費(fèi)建站歡迎大家使用！
假如確要修改，可以使用下面說的方式進(jìn)行通信：
首先，在子組件的UI點(diǎn)擊回調(diào)方法中，調(diào)用this.$emit('【自己設(shè)置事件名】')，
向外發(fā)送一個(gè)事件；
接著各級父組件會(huì)收到這個(gè)事件，
則在父組件中 調(diào)用 子組件標(biāo)簽處，
以 @【事件名】= "回調(diào)方法名"的形式，監(jiān)聽該事件以及配置回調(diào)方法；
回調(diào)方法中就可 對 子組件用意修改 的 父組件數(shù)據(jù)字段 進(jìn)行修改；
注意，
觸發(fā)事件的命名，用駝峰命名法（如下heHeDa）；
監(jiān)聽事件的命名，用橫桿間隔法（如下he-he-da）。
代碼：
Hello World! heheheheheheda
運(yùn)行，點(diǎn)擊組件：
攜帶參數(shù)的事件 發(fā)送和監(jiān)聽回調(diào)
this.$emit()可以增加參數(shù)位，
父組件的監(jiān)聽回調(diào)中，
則可加形參位 用于接收參數(shù)（如handleItemEvent(param)中的 param）；
代碼：
運(yùn)行，點(diǎn)擊效果：
子組件需 發(fā)送多個(gè)參數(shù) 亦可，只需在this.$emit()按需增加參數(shù)位，
父組件的監(jiān)聽回調(diào)中，增加對應(yīng)的形參 去接收就可：
效果：
當(dāng)然 父組件 接收 子組件參數(shù) 后的 計(jì)算邏輯，
可以在 子組件傳參 的時(shí)候 計(jì)算完成 再傳給this.$emit()！
父組件接收時(shí)，直接 受值就可（handleItemEvent(count)）；
效果同上一個(gè)例子；
使用 組件的emits板塊 整理組件事件
實(shí)際開發(fā)場景中，我們一個(gè)組件自己設(shè)置的觸發(fā)事件可能會(huì)很多，
我們不可能一個(gè)一個(gè)去梳理核實(shí)，
這個(gè)時(shí)候即可以使用 組件的emits板塊 來整理組件的事件；
可以把組件中 自己設(shè)置到的事件都寫在這里，方便梳理，提高可讀性，
或者者把 想要定義的事件 寫在這里，
如此一來，假如不記得編寫對應(yīng)的自己設(shè)置事件，
Vue系統(tǒng)會(huì)在運(yùn)行時(shí) 給予警告：
假如不記得編寫對應(yīng)的自己設(shè)置事件，Vue系統(tǒng)會(huì)在運(yùn)行時(shí) 給予警告：
使用 組件emits板塊的 Object形式 校驗(yàn)外傳的參數(shù)值
可以根據(jù)需要，使用 組件emits板塊的 Object形式 校驗(yàn)外傳的參數(shù)值，
如下，子組件的emits板塊，
‘key’值定義對應(yīng)的事件名，‘value’值定義一個(gè)校驗(yàn)函數(shù)，
返回true表示同意數(shù)值外傳，
返回false表示不同意，會(huì)給出警告；
運(yùn)行，點(diǎn)擊效果：
結(jié)合$emit、v-bind與v-model 實(shí)現(xiàn) 父子組件通信（數(shù)據(jù)雙向綁定）
v-model可以實(shí)現(xiàn)數(shù)據(jù)字段與DOM節(jié)點(diǎn)內(nèi)容的雙向綁定，
也可以實(shí)現(xiàn)數(shù)據(jù)字段與數(shù)據(jù)字段之間的雙向綁定；
而v-bind只能是實(shí)現(xiàn)單向數(shù)據(jù)流；
若不自己設(shè)置承接的字段名，則需要用modelValue作為默認(rèn)的承接字段名；
同時(shí)，$emit()的一參默認(rèn)為update:modelValue，二參為綁定的數(shù)據(jù)；
如下代碼，
子組件 的承接變量modelValue 同父組件的count字段 雙向綁定，
（實(shí)際上就是v-model的特性 —— 將 子組件的內(nèi)容即modelValue 同 父組件的數(shù)據(jù)字段雙向綁定）
而后顯示在子組件的DOM中（{{modelValue}}）：
效果：
當(dāng)然也可以自己設(shè)置字段名，
這種方式需要給v-model字段接一個(gè)字段名，
同時(shí)將這個(gè)字段名替代子組件中所有modelValue的位置：
實(shí)現(xiàn)效果與上例相同；
結(jié)合$emit、v-bind與v-model 實(shí)現(xiàn) 父子組件通信（多個(gè)字段的應(yīng)用案例）
如下代碼，
父組件的count與子組件承接的testField字段，
父組件的count1與子組件承接的testField1字段，
分別實(shí)現(xiàn)了雙向綁定：
效果：
自己設(shè)置修飾符
機(jī)制：在父組件調(diào)用處，在v-model后 使用自己設(shè)置修飾符，
在實(shí)現(xiàn)修飾符邏輯的地方，如點(diǎn)擊事件中，
通過this.modelModifiers.[自己設(shè)置修飾符名]返回的布爾值，
判斷客戶能否使用了修飾符，
進(jìn)而分別對使用與否做相應(yīng)的解決；
另外'modelModifiers'板塊中可以指定默認(rèn)值（下代碼指定為一個(gè)空對象{}）；
試驗(yàn)this.modelModifiers的作用首先下面是一個(gè)空的解決，'modelModifiers'板塊中指定默認(rèn)值（下代碼指定為一個(gè)空對象{}），
mounted函數(shù)中打印 子組件modelModifiers屬性的內(nèi)容，
代碼如下，
運(yùn)行后，可以見打印了一個(gè)對象{captalize: true}，
正是我們傳入的自己設(shè)置修飾符.captalize（這里未做解決）
【假如這里v-model不接修飾符，
console.log(this.modelModifiers);將打印一個(gè)空對象{}】：
下面在子組件的點(diǎn)擊回調(diào)handleClick()中，通過this.modelModifiers.[自己設(shè)置修飾符名]實(shí)現(xiàn)自己設(shè)置修飾符邏輯
實(shí)現(xiàn)效果即 點(diǎn)擊之后使得對應(yīng)的字符串 全變大寫；
效果：
插槽【slot】【傳組件示例】
使用關(guān)鍵 主要分兩個(gè)部分：
自己設(shè)置子組件：
在需要 被父組件插入組件的位置，
使用
父組件：
在調(diào)用子組件標(biāo)簽對時(shí)，
往子組件標(biāo)簽對 間
寫上 要替換子組件標(biāo)簽對中
【slot】的出現(xiàn)，
方便父子組件之間數(shù)據(jù)的傳遞，
方便DOM的傳遞；
Hello World! heheheheheheda
運(yùn)行效果：
注意，slot標(biāo)簽上是無法直接增加事件（修飾符）的，如有需要，可以在外層包裹一層標(biāo)簽，再加上事件
運(yùn)行，點(diǎn)擊提交文本或者按鈕：
插槽【傳 字符串示例】
插槽【傳 自己設(shè)置子組件 示例】
運(yùn)行：
插槽作用域問題
盡管，父組件中 往子組件標(biāo)簽間 插入的組件 會(huì)替換子組件的插槽位，
但是父組件中 往子組件標(biāo)簽間 插入的組件，
其所使用的數(shù)據(jù)字段，依然是父組件的，而非子組件；
父組件的template中 調(diào)用的數(shù)據(jù)是 父組件中的 data；
子組件的template中 調(diào)用的數(shù)據(jù)是 子組件中的 data；
.jpg)
插槽 UI默認(rèn)值
可以在子組件的插槽標(biāo)簽間 編寫默認(rèn)值，
假如父組件沒有使用 組件 注入插槽，
則對應(yīng)位置 會(huì)顯示默認(rèn)值：
效果：
插槽的靈活拆分與應(yīng)用【具名插槽】
使得插槽的 父組件注入部分 和 子組件占位部分，能夠更加靈活的布局，
可以通過v-slot:[插槽名]來對一組插槽命名，
父組件定義之后 插槽名及其對應(yīng)的組件之后，
子組件只要要在要占位的地方，
配合name屬性 使用對應(yīng)命名的標(biāo)簽，
就可將對應(yīng)的父組件插槽組件占用過來；
父組件 的插槽注入部分的組件，
需要用標(biāo)簽組包裹起來，
使用v-slot:[插槽名]命名一組插槽；
子組件使用
效果：
v-slot指令的簡寫
v-slot:[插槽名] 可以簡寫成 #[插槽名]
實(shí)現(xiàn)的效果同上例；
普通的v-for例子 進(jìn)行 列表渲染
下面在子組件中，
使用v-for指令 循環(huán) 子組件的數(shù)據(jù)，創(chuàng)立DOM組件：
運(yùn)行效果：
v-for結(jié)合v-bind、v-slot、
作用：給數(shù)據(jù)由子組件提供，
但列表UI實(shí)現(xiàn) 由父組件調(diào)用處提供，
相似于回調(diào)接口的設(shè)計(jì)邏輯?。?！
子組件使用v-for循環(huán)獲取數(shù)據(jù)，
每一輪迭代 取得的子項(xiàng)數(shù)據(jù)，
通過v-bind設(shè)置到占位的標(biāo)簽中，
父組件中，在引用的 子組件標(biāo)簽上，
使用v-slot承接 子組件通過v-bind傳來的所有數(shù)據(jù)字段，
同時(shí)將這些字段打包成一個(gè)相似JSONObject的結(jié)構(gòu) 字段，
并為這個(gè)字段 指定一個(gè)形參名（如下代碼中的mySlotProps）；
【注意！
前面是，
使用v-slot命名父組件中 擬填充插槽的組件，
子組件在標(biāo)簽上，通過name=使用 父組件的命名，靈活填充插槽；
而這里是，
的slot反而是起到了相似props的作用，而非之前的命名組件作用！】
在 擬填充插槽的DOM組件中，
使用方才 v-slot指定的形參，用于開箱取數(shù)據(jù)：
運(yùn)行效果同上例；
使用解構(gòu)概念進(jìn)行簡寫
使用v-slot="{item}"替代前面的props的結(jié)構(gòu)邏輯形式；
意義是，把mySlotProps這個(gè)承接屬性的字段，
里面的item屬性直接解構(gòu) 剝?nèi)?/code>出來，直接拿來用；
運(yùn)行效果同上例；
動(dòng)態(tài)組件
常規(guī)的利用雙向綁定特性，通過點(diǎn)擊事件切換UI的寫法：運(yùn)行效果：
動(dòng)態(tài)組件寫法
重慶分公司
重慶分公司
