Vue3实现双向绑定 迁移

vue3.x版本对比vue2.x版本变化挺大的，双向绑定也由之前版本的一个变为了多个

官网说明

• 非兼容

  ：用于自定义组件时，

  v-model

  prop 和事件默认名称已更改：

  • prop：value -> modelValue；
  • event：input -> update:modelValue；

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

• 新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；

• 新增：现在可以自定义 v-model 修饰符。

示例

<template>
    <h1>{{ modelValue }}</h1>
</template>
<script lang='ts'>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
    name: 'TestVModel',
    emits: ['update:value'],
    props: { value: String },
    setup(props, { emit }) {
        const modelValue = ref(props.value)
        //数据改变了 通知父组件
        watch(modelValue, (val) => {
            emit('update:value', val)
        })
        //监听插槽值得变化
        watch(() => props.value,(val) => {
             modelValue.value = val
        })
        return {modelValue}
  },
})
</script>
//使用
<test-v-model v-model:value="'hello vue3'"></test-v-model>

用上面同样的方法可以使一个组件有多个v-model存在可以出现 v-model:title v-model:name等等