vue3中v-model的使用

在vue2中v-model使用的還是挺多的，不過呢，這個指令一般是用在了輸入框中，並且這個指令其實就是個語法糖
<input type="text" />data </input>
其實這個就是語法糖，真實的寫法是
<input type="text" />data</input>

 

看到了嗎，其實這個就和我們普通的定義組件上的數據，然后獲取數據其實是一樣的，感覺比較高級，很多彈窗里面會這么來寫，

之前對這邊官方描述理解的不深，感覺沒啥用，現在有點感覺了。

現在vue3中，這里寫法改了。

看下面的代碼，其實就是把之前的value改成了modelValue，把接收的input事件改成了update:modelValue，並且呢，考慮到modelValue意義不是很明確，可以使用v-model:title='title'這種方式來明確具體的字段名，這樣子，在子組件里面就可以直接使用title這個字段了。

父組件

<VmodalTest v-model:show="show" v-show="show"></VmodalTest>
子組件

<template>
  <div class="vmodal-test">
    <p>vmodal test{{show}}</p>
    <button @click="$emit('update:show',false)">按鈕啊</button>
  </div>
</template>

<script>
export default {
  name: 'VmodalTest',
  props: {
    show: {
      type: Boolean
    }
  }
}
</script>

<style scoped>

</style>

 

下面有一篇文章寫的很詳細，我也是看了這篇文章才感覺看懂了。

https://blog.csdn.net/weixin_34242698/article/details/113077881

 

文檔里面還有多各v-model的，這就跟多個屬性一個意思，貼一下官放文檔里面的例子

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

const app = Vue.createApp({})

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

v-model除了參數還有修飾符，之前有trim,number之類的系統自帶的，現在可以自定義了，基本寫法就是v-model.trim='xxx'

現在如果加上參數的話，就這么寫，v-model:title.catimize='data'

然后子組件里面呢，在props里面有了一個modelModifiers的對象，用來接收這些自定義的修飾符，

有參數的話，名字就邊了，叫'arg'+modifiers了

舉個官方例子把：

看到沒有，變成fooModifiers了

<my-component v-model:foo.capitalize="bar"></my-component>
app.component('my-component', {
  props: ['foo', 'fooModifiers'],
  template: `
    <input type="text" 
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `,
  created() {
    console.log(this.fooModifiers) // { capitalize: true }
  }
})