sync

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)，先為溧水等服務(wù)建站，溧水等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為溧水企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在vue2.4以前，父組件向子組件傳值用props；子組件不能直接更改父組件傳入的值，需要通過(guò)$emit觸發(fā)自定義事件，通知父組件改變后的值。比較繁瑣，寫(xiě)法如下：

//父組件




//子組件

vue2.4以后的寫(xiě)法明顯舒服許多，上面同樣的功能，直接上代碼

//父組件




//子組件

寫(xiě)法上簡(jiǎn)化了一部分，很明顯父組件不用再定義方法檢測(cè)值變化了。其實(shí)只是對(duì)以前的$emit方式的一種縮寫(xiě)，.sync其實(shí)就是在父組件定義了一update:val方法，來(lái)監(jiān)聽(tīng)子組件修改值的事件。

$attrs

想象一下，你打算封裝一個(gè)自定義input組件——MyInput，需要從父組件傳入type，placeholder，title等多個(gè)html元素的原生屬性。此時(shí)你的MyInput組件props如下：

props:['type','placeholder','title',...]

很丑陋不是嗎？$attrs專門(mén)為了解決這種問(wèn)題而誕生，這個(gè)屬性允許你在使用自定義組件時(shí)更像是使用原生html元素。比如：

//父組件

my-input的使用方式就像原生的input一樣。而MyInput并沒(méi)有設(shè)置props，如下

基礎(chǔ)掃盲

v-model是v-bind:value和v-on:input的簡(jiǎn)寫(xiě)，所以在父組件你完全可以直接寫(xiě) :value="name",@input="val => name = val"。查看文檔

疑難

引用下vue的官方api中對(duì)$attrs的說(shuō)明

$attrs包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)

比較迷惑的一點(diǎn)是給子組件設(shè)置:value="name"相當(dāng)于給子組件設(shè)置props:['value']，所以在MyInput中直接從$attrs獲取不到value，需要重新包裝$attrsAll，添加value屬性。所以子組件還有下面寫(xiě)法，我傾向于這種寫(xiě)法，因?yàn)樗鼉?yōu)雅

$listener

同上面$attrs屬性一樣，這個(gè)屬性也是為了在自定義組件中使用原生事件而產(chǎn)生的。比如要讓前面的MyInput組件實(shí)現(xiàn)focus事件，直接這么寫(xiě)是沒(méi)用的

必須要讓focus事件作用于MyInput組件的input元素上，最終的MyInput源碼如下：

到此這篇關(guān)于Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用的文章就介紹到這了,更多相關(guān)Vue2.4 .sync、$attrs、$listeners內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！