iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 5

Day05 自己的國家自己救-自己的v-model自己定義

v-model這個指令我們常用在資料的綁定上,希望我們所綁定的資料可以做到雙向(事件與屬性)綁定,這部分Vue允許我們客製化它,v-model默認會利用名為value的prop和input的事件,我們可以透過model的選項來自定義v-model。

Vue.component('base-input', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String
  },
  template: `
    <input
      type="text"
      v-bind:value="value"
      v-on:change="$emit('change', $event.target.value)"
    >
  `
})

model裡的prop與event可以用於不同目的,定義完後,我們就可以使用該元件

<base-input v-model="someWords"></base-input>

---我是分隔線-----------------------------------------------------

昨天有教大家父子元件的雙向綁定,今天再加碼傳授一個透過.sync修飾符來完成雙向綁定。
一般我們都是子元件在JS上賦予新值,透過$emit發出事件

this.$emit('update:name', newName)

然後父元件接收到數據更新

<child-component
  v-bind:name="doc.name"
  v-on:update:name="doc.name = $event"
></child-component>

我們更可以將它縮寫成

<child-component
  v-bind:name.sync="doc.name">
</child-component>

只是須注意到的事情,具有修飾詞.sync不能綁定表示式或文字型的物件(難以形容,看以下範例),你應該是綁定在屬性名上。

v-bind:name.sync="'Name:' + doc.name "
v-bind.sync="{ name: doc.name }"

以上都是不能使用之情況

---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day04 溝通很重要-元件註冊與父子元件溝通
下一篇
Day06 小夫我要Slot進來了喔,Slot插槽
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言