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了

內部組件

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

外部調用

{{title}}

vue 3.0 beta 測試經過

one more thing

基礎問題搞定了，能夠開始個人文檔驅動系列了。