Vue 2迁移v-model

vue 3中v-model内容的修改

1.非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
prop：value -> modelValue；
event：input -> update:modelValue；
2.非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；
3.新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；
4.新增：现在可以自定义 v-model 修饰符。
实话说，看到上面列出的内容，有点懵，所以就在本地自己敲了一下例子，框架是vue-cli3,从而使用vue 2中的方法时，会有对应的报错，希望对你有所帮助

1.针对第一点默认名称

子组件

<template>
  <input type="text" :value="modelValue" @input="changePageTitle">
</template>

<script>
export default {
  props: {
    modelValue: String, // 以前是`value：String`
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle (title) {
      this.$emit('update:modelValue', title.target.value) // 以前是 `this.$emit('input', title)`
    }
  }
}
</script>

父组件

 <PropsParmas :modelValue="pageTitle" @update:modelValue="pageTitle = $event" /> {{pageTitle}}

不使用v-model时，自定义组件的数据传输和自定义事件的数据触发
父组件需要向子组件传输的props是modelValue
父组件使用@update:modelValue自定义事件对modelValue进行监听
子组件中value绑定声明的props,input事件发生变化时，使用this.$emit(’@update:modelValue’,e.target.value)对最新的数据进行提交,从而实现双向绑定

我们可以对父组件进行简写

<PropsParmas v-model="pageTitle" /> {{pageTitle}}

发现结果和上面的相同，
所以
对v-model修改，不兼容，需要手动去修改对应的地方
vue 3对v-model的更改：用于自定义组件时，v-model传入的属性和事件默认名称已更改 v-model="pageTitle" 子组件的props是modelValue 子组件的事件update:modelValue

不使用v-model
子组件

<template>
  <input type="text" :value="title" @input="changePageTitle"></button>-->
</template>

<script>
export default {
  props: {
    title: String
  },
  emits: ['update:title'],
  methods: {
    changePageTitle (title) {
      this.$emit('update:title', title.target.value) // 以前是 `this.$emit('input', title)`
    }
  }
}
</script>

父组件

<PropsParmas :title="pageTitle" @update:title="pageTitle=$event" /> {{pageTitle}}
//如果改成
<PropsParmas v-model="pageTitle" /> {{pageTitle}}
则不能实现双向绑定的功能

改成下面的形式，则input中数据是双向的
<PropsParmas v-model:title="pageTitle" /> {{pageTitle}}

v-model可以用来简化我们的代码
v-model:title简写等价于传入的属性值，以及父组件监听的自定义事件名
:title="" @update:title=""
v-model:modifyData <===> :modeifyData=“变量名” @update:modeifyData=“事件名”
迁移策略

针对所有不带参数的v-model,props和事件名改为modelValue和update:modelValue 例如 父组件 v-model="pageTitle" 子组件 props:{ modelValue:String } this.$emit('update:modelValue',title)

2.针对第二点v-bind:sync

<PropsParmas :title="pageTitle" @update:title="pageTitle=$event" /> {{pageTitle}}

使用v-bind:sync对其进行改写

<PropsParmas :title.sync="pageTitle" />

浏览器会报错

在进行迁移时，如果有使用.sync的地方，将其换成v-model
比如
:title.sync=“pageTitle”
可以改写成v-model:title的形式

非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；

3.针对第三点

父组件

<PropsParmas
 v-model:title="pageTitle"
 v-model:content="pageContent" /> 
 1.{{pageTitle}}2.{{pageContent}}
    

子组件

<template>
  <input type="text" :value="title" @input="changePageTitle">
  <input type="text" :value="content" @input="changePageTitle1">
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  emits: ['update:title', 'update:content'],
  methods: {
    changePageTitle (title) {
      this.$emit('update:title', title.target.value) // 以前是 `this.$emit('input', title)`
    },
    changePageTitle1 (title) {
      this.$emit('update:content', title.target.value) // 以前是 `this.$emit('input', title)`
    }
  }
}
</script>

针对第四点
父组件

<PropsParmas v-model.title="pageTitle" />{{pageTitle}}

子组件
props中的modelModifiers会拿到父组件中自定义的修饰符

<template>
  <input type="text" :modelValue="title" @input="changePageTitle">
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle (title) {
      let value = title.target.value
      if (this.modelModifiers.title) {
        value = value.charAt(0).toUpperCase()
      }
      this.$emit('update:modelValue', value) // 以前是 `this.$emit('input', title)`
    }
  },
  created () {
    console.log(this.modelModifiers) //{title:true}
  }
}
</script>

戳这里【查看官网】