vue3.0的 v-model 為啥不好用了？

vue3.0還支不支持v-model了？

vue3.0 的beta版出來后就想嘗個鮮，順便實現以下我的想法，於是開整。前面各種折騰就不說了。開始弄自定義組件。

自定義了一個input，但是按照vue2.X的方式設置v-model的時候居然不好用了，各種檢查代碼沒問題。只好先改成屬性+事件監聽的方式，但是這也不方便呀，於是開始各種查資料。

新鮮事物資料特別少，查了半天也沒弄明白，有說不支持了，有說改寫法了，各種嘗試還是不好使。又找到一個原版英文資料，似乎要加冒號，但是冒號后面怎么寫不知道，好吧是我英文太爛看不懂。

直到在B站找到了一個視頻，終於解決了問題。vue3.0的v-model的變化

vue2.0的v-model

emmmm，算了不寫了，大家都知道。如果不清楚的話，可以看上面的連接。

vue3.0 的v-model的寫法

2.0想要支持多屬性的話，需要使用.sync。
3.0為了讓自定義組件可以更好的支持多個屬性（可能吧），做了一點點修改，去掉了.sync，給v-model加了個冒號。

v-model:name="name" v-model:age="age"

冒號后面是內部組件的屬性的名稱，后面跟的是實體類的屬性。而組件內部的事件要改一下。

this.$emit('update:name', event.target.value)

每一個dom寫一個input事件，設定好屬性名稱。

如果我的組件只有一個屬性怎么辦，還要寫冒號嗎？當然不需要，vue怎么會增加我們的麻煩呢。只需要設置默認屬性名就行。
內部組件使用 modelValue 作為屬性名稱，外部就可以像vue2.0那樣使用v-model了

內部組件

 <input type="text" :value="modelValue" @input="textInput" >

export default {
  name: 'nf-form-input',
  props: {
    modelValue: String,
    meta: Object
  },
  methods: {
    textInput: function (e) {
      this.$emit('update:modelValue', event.target.value)
    }
  }
}

外部調用

<nfInput v-model="name" /> {{title}}

vue 3.0 beta 測試通過

one more thing

基礎問題搞定了，可以開始我的文檔驅動系列了。