這一節(jié)我們使用自定義的v-model實(shí)現(xiàn) 子組件觸發(fā)父組件更新
首先我們復(fù)習(xí)下v-model
在booklist.vue文件里加入測(cè)試代碼
image.png
使v-model的值為當(dāng)前頁(yè)碼值進(jìn)行雙向綁定
這時(shí)我在輸入框中改變頁(yè)碼值 想應(yīng)的數(shù)據(jù)也會(huì)跟著變化
效果如下
image.png
我在輸入框中輸入3
表示第三頁(yè)
image.png
是因?yàn)槲覀兏淖兞水?dāng)前頁(yè)碼值currentPage（是vue實(shí)例對(duì)象中data里面的數(shù)據(jù)）改變data里面數(shù)據(jù) 會(huì)觸發(fā)組件的重新渲染
實(shí)際上v-model是v-bind:value 和 v-on:input 事件的語(yǔ)法糖
我們可以寫成下面的方式
image.png
v-model里面默認(rèn)綁定的是value值和input事件
效果和上面一模一樣
下面我們看下如何用自定義v-model實(shí)現(xiàn)子組件觸發(fā)父組件更新
首先在父組件里面的pagebar組件上 寫入v-model屬性 把currentPage傳入子組件
代碼如下
image.png
那么子組件如何獲取呢？
在父組件里面的子組件pagabar上面寫入v-model會(huì)自動(dòng)將value值和input事件傳入子組件
只需在子組件的props屬性里面加入value值即可
然后還是用emit方法觸發(fā)父組件更新 只不過(guò)事件名 為v-model的input
如下
image.png
image.png
運(yùn)行結(jié)果
image.png
點(diǎn)擊圖書進(jìn)行分頁(yè)了 并且頁(yè)碼值出現(xiàn)在下面的輸入框內(nèi)
以上就是在組件里面使用v-model實(shí)現(xiàn)子組件觸發(fā)父組件更新方法 原理和原生組件是一樣的
但是上面的代碼有些別扭 比如說(shuō)v-model默認(rèn)傳入給子組件的value值和input事件名
我們還可以改寫這兩個(gè)名字 讓我們自定義名字
在vue2.2版本后提出的
寫法如下
增加一個(gè)model屬性在里面加入prop和event分別 表示替代value和input事件的名字
image.png
這樣看起來(lái)我們的代碼看起來(lái)不別扭
