电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue自定義組件雙向綁定實現原理及方法詳解

瀏覽:105日期:2022-11-29 17:28:46

前言

無論在任何的語言或框架中,我們都提倡代碼的復用性。對于Vue來說也是如此,相同的代碼邏輯會被封裝成組件,除了復用之外,更重要的是統一管理提高開發效率。我真就接手過一個項目,多個頁面都會用到的列表,沒有去封裝列表組件,只要有一點改動,每個頁面都得加上。很肯定的說,沒有用組件化開發的Vue項目是沒有靈魂的。所以如何封裝一個優雅且復用性高的組件成為我們必需的技能。

Tab自定義組件

首先來看一個Tab組件的實現,看看它存在什么問題,哪里可以改進?

效果

Vue自定義組件雙向綁定實現原理及方法詳解

組件

<template> <div class='tabs'> <div : v-for='(item,index) in tabs' :key='index' @click='tabChange(item)'> {{item}} </div> </div></template><script>export default { props:{ tabs:{ type: Array, default: ()=> [] }, activeName:{ type: String, default: ’’ } }, methods:{ tabChange(item){ this.$emit(’tabChange’,item) } },}</script>

使用

<template> <div> <Tabs :tabs='tabs' :activeName='activeName' @tabChange='tabChange' /> </div></template><script>import Tabs from ’../components/Tabs’export default { components:{ Tabs }, data(){ return{ tabs:[’黃金體驗’,’敗者食塵’,’緋紅之王’,’白金之星’,’波紋疾走’], activeName: ’黃金體驗’ } }, methods:{ tabChange(item){ this.activeName = item } },}</script>

這個組件最大的問題就是,activeName 需要使用者額外通過事件來手動更新,假如有另一個使用者接手,在不知道這種情況下使用,會出現tab沒有切換的情況。然后要去看組件內部實現,再回來修改代碼,很顯然這樣的組件是失敗的。本著所有的臟活累活都由組件實現的原則,理想的狀態應該是使用者不需要管理 activeName,而是由組件內部去更新。

如何改進修改prop?

可能有人會想到,既然要由內部管理,那在組件內部修改prop的值是不是就可以了?來看下這樣的做法是否可行修改組件tabChange方法,在點擊時更新prop的值

tabChange(item){ this.activeName = item this.$emit(’tabChange’,item)}

使用時,控制臺拋出警告

Vue自定義組件雙向綁定實現原理及方法詳解

由于prop是單向數據流,父級prop的更新會向下流動到子組件中,相反的在子組件內部直接更新狀態,會導致數據的流向不明確。例如,在父組件中有多個子組件依賴同一個屬性,其中一個子組件更新該屬性,會引發其余子組件發生改變,發生問題時不容易被找到,因此Vue不推薦我們這樣做。另外,在父組件發生更新時,子組件的prop會被刷新為最新的值。

單向數據流: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

正解:model選項改進組件

組件model選項

允許一個自定義組件在使用 v-model 時定制 prop 和 event。默認情況下,一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突。

model: https://cn.vuejs.org/v2/api/

在model選項里,我們可以綁定一個屬性,并為其添加事件,只需在調用方法時傳入值即可更新屬性。

<script>export default { model:{ prop: ’activeName’, event: ’update’ }, props:{ tabs:{ type: Array, default: ()=> [] }, activeName:{ type: String, default: ’’ } }, methods:{ tabChange(item){ this.$emit(’update’,item) // 這里更新activeName this.$emit(’tabChange’,item) } }}</script>

注意你仍然需要在組件的 props 選項里聲明 prop。

使用

使用組件雙向綁定后,屬性在組件內部被更新時,父組件的 activeName 也會隨之更新,這樣使用者可以很明確的知道數據可能會被修改。

<Tabs :tabs='tabs' v-model='activeName' />

總結

使用組件的model選項實現自定義組件雙向綁定,在組件內部通過事件更新屬性值,這樣的自定義組件使用起來更優雅。其實通過model選項的方式去修改父級屬性,我認為有點違反了單向數據流的原則。本來單向數據流是不允許子級修改父級屬性的,只是使用v-model的語法糖,看起來會讓數據流向顯得更加明確,恰好彌補這個缺點。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 字典-新华字典-在线字典查字-字典趣| 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 | 香港新时代国际美容美发化妆美甲培训学校-26年培训经验,值得信赖! | 天长市晶耀仪表有限公司| 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 嘉兴恒升声级计-湖南衡仪声级计-杭州爱华多功能声级计-上海邦沃仪器设备有限公司 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 钢托盘,铁托盘,钢制托盘,镀锌托盘,饲料托盘,钢托盘制造商-南京飞天金属13260753852 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | 拉力机-万能试验机-材料拉伸试验机-电子拉力机-拉力试验机厂家-冲击试验机-苏州皖仪实验仪器有限公司 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 焦作网 WWW.JZRB.COM| 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 继电器模组-IO端子台-plc连接线-省配线模组厂家-世麦德 | PE一体化污水处理设备_地埋式生活污水净化槽定制厂家-岩康塑业 | 臭氧老化试验箱,高低温试验箱,恒温恒湿试验箱,防水试验设备-苏州亚诺天下仪器有限公司 | 立式壁挂广告机厂家-红外电容触摸一体机价格-华邦瀛 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 深圳市简易检测技术有限公司 | 越南专线物流_东莞国际物流_东南亚专线物流_行通物流 | 宁波普瑞思邻苯二甲酸盐检测仪,ROHS2.0检测设备,ROHS2.0测试仪厂家 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 不锈钢复合板厂家_钛钢复合板批发_铜铝复合板供应-威海泓方金属复合材料股份有限公司 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 预制围墙_工程预制围墙_天津市瑞通建筑材料有限公司 | 许昌奥仕达自动化设备有限公司 | 家乐事净水器官网-净水器厂家「官方」 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 合肥地磅_合肥数控切割机_安徽地磅厂家_合肥世佳电工设备有限公司 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 山东活动策划|济南活动公司|济南公关活动策划-济南锐嘉广告有限公司 | 山东led显示屏,山东led全彩显示屏,山东LED小间距屏,临沂全彩电子屏-山东亚泰视讯传媒有限公司 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 不锈钢螺丝,不锈钢螺栓,不锈钢标准件-江苏百德特种合金有限公司 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 |