vue自定義組件實(shí)現(xiàn)v-model雙向綁定數(shù)據(jù)的實(shí)例代碼
項(xiàng)目中會遇到自定義公共組件供項(xiàng)目調(diào)用,正常情況可以使用 props定義參數(shù)接收父組件傳的參數(shù),然后通過子組件的$emits()方法回傳數(shù)據(jù)給父組件。
類似如下:
父組件
<common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange"></common-checkbox>
/** * 接收子組件回傳進(jìn)行處理 */ checkChange(value) { this.goodsSelected=value//子組件數(shù)據(jù)賦值給父組件 }
子組件
/** * 切換選中回傳 */ toggleCheck(value) { this.$emit('changeCheck', value)//回傳方法,把子組件變化后的數(shù)據(jù)回傳給父組件處理 }
但是這種寫法需要調(diào)用公共組件的頁面額外寫處理的方法,而且顯得太low,我們可不可以像是框架自帶的公共組件一樣去聲明直接v-model雙向綁定呢?接下來提供項(xiàng)目中實(shí)際遇到這種情況的處理方法
第一種方式:
正常情況下當(dāng)你在父組件里給子組件綁定 v-model屬性時,子組件中會默認(rèn)的將 v-model綁定的數(shù)據(jù),付給子組件 名為 value的props屬性,value依然需要提前在子組件props中聲明,否則接收不到。
當(dāng) value修改后,并不會立即雙向回傳給父組件。如果想回傳實(shí)現(xiàn)同步更新父組件的v-model需要如下操作
this.$emit('input', value)
當(dāng)未聲明雙向綁定回傳的事件時,默認(rèn)通過input事件回傳,為什么說 “當(dāng)未聲明雙向綁定回傳的事件”,這個便是第二種方式,下面會講到。
簡單來說,第一種方式的實(shí)現(xiàn),首先是v-model綁定父組件數(shù)據(jù) ,然后子組件value 的props屬性自動接收,最后當(dāng)數(shù)據(jù)更改后調(diào)用this.$emit('input', value) 回傳父組件,這樣父組件不需要額外實(shí)現(xiàn)子組件的回傳就可以實(shí)現(xiàn)雙向綁定
第二種方式:
前面提到 “當(dāng)未聲明雙向綁定回傳的事件” 默認(rèn)使用 input回傳,既然這樣說了那就存在,如果我不用input呢?這就需要了解vue的一個特殊的屬性:model,這個屬性可以用來聲明 子組件用哪個字段去接收雙向綁定的數(shù)據(jù),以及用哪個方法回調(diào)更新父組件v-model的數(shù)據(jù),寫法如下:
export default { name: 'CommonCkeckBox', model: { prop: 'checked', event: 'changeCheck' }, props: { checked: { type: Boolean, default: false, }, // 選中狀態(tài) } }
這種寫法就意味著,父組件 雙向綁定的數(shù)據(jù)會綁定到子組件名為checked的props屬性,并且,當(dāng)子組件調(diào)用this.$emit('changeCheck', value)時,會同步的更新父組件的數(shù)據(jù),實(shí)現(xiàn)雙向綁定。
接下來附一段自定義checkbox的代碼以作參考:
<template> <div class="check-box-container" @click="toggleCheck()" :style="{width:width,height:height}"> <div class="checkbox-icon"> <!-- 三種狀態(tài) 選中 未選 禁用 --> <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="width" :height="height" key="select" v-if="checked&&!disabled"/> <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" key="unselected" v-if="!checked&&!disabled" /> <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" class="disabled" key="unselected" v-if="disabled"/> </div> <slot></slot> </div> </template> <script> /** * 全局統(tǒng)一彈窗 */ export default { name: 'CommonCkeckBox', model: { prop: 'checked', event: 'changeCheck' }, props: { checked: { type: Boolean, default: false, }, // 選中狀態(tài) disabled: { type: Boolean, default: false, }, // 是否禁用 width: { type: String, default: '16px', }, // 按鈕默認(rèn)寬度 height: { type: String, default: '16px', }, // 按鈕默認(rèn)高度 }, created() { }, data() { return { } }, methods: { /** * 切換選中回傳 */ toggleCheck() { this.$emit('changeCheck', !this.checked) this.$emit('toggleCheck') } }, watch: { checked: { handler(newValue, oldValue) { // 開放狀態(tài)變更事件 this.$emit('onChange') }, deep: true } }, } </script> <style lang="scss" scoped> .check-box-container{ display: inline-block; .checkbox-icon{ img{ transform: translateZ(0); will-change: auto; } .disabled{ background-color:#f5f5f5; border-radius: 50%; } } } </style>
父組件:
<common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'" :height="'16px'"></common-checkbox>
具體用哪種方式根據(jù)項(xiàng)目場景選擇,若第一種不滿足需求,可以嘗試第二種實(shí)現(xiàn)。
總結(jié)
到此這篇關(guān)于vue自定義組件實(shí)現(xiàn)v-model雙向綁定數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue v-model雙向綁定數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue子組件改變父組件傳遞的prop值通過sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定(DEMO)
- Vue.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的代碼示例
- 使用Vue.js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
- Vue父子組件數(shù)據(jù)雙向綁定(父傳子、子傳父)及ref、$refs、is、:is的使用與區(qū)別
- 淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
- vue中如何解除數(shù)據(jù)之間的雙向綁定
- vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
- proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
- vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法
- Vue項(xiàng)目開發(fā)實(shí)現(xiàn)父組件與子組件數(shù)據(jù)間的雙向綁定原理及適用場景
相關(guān)文章
vue實(shí)現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實(shí)現(xiàn)畫筆回放,canvas轉(zhuǎn)視頻播放功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01Vue reactive函數(shù)實(shí)現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01elementUI?el-table二次封裝的詳細(xì)實(shí)例
在項(xiàng)目中會多次使用表格展示數(shù)據(jù),不對這個table進(jìn)行二次封裝成我們自己想要的,重復(fù)的代碼量的工作會比較大,下面這篇文章主要給大家介紹了關(guān)于elementUI?el-table二次封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06一文詳解如何在vue中實(shí)現(xiàn)文件預(yù)覽功能
很多Vue項(xiàng)目中都需要PDF文件預(yù)覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何在vue中實(shí)現(xiàn)文件預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-10-10