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 }
  }
})