v-model实例

v-model

vue2: v-model实现主要是通过给原生元素绑定对应的属性和事件，并派发事件到父元素。父元素直接通过自定义组件v-model正常使用。

1. Input的v-model实现

<template>
    <input type="text" :value="val" @input="Update" />
</template>
<script>
	export default {
	   props: {
	       val: String,
	   },
	   methods: {
	        Update(e: any) {
	            this.$emit("input", e.target.value);
	        }
	    }
	}
</script>

2. Checkbox的v-model实现(需要通过model指定属性和事件)

<template>
    <input type="checkbox" :checked="checked" @change="Change" />
</template>
<script>
export default {
   props: {
       checked: Boolean
   },
   model: {
       prop: "checked",
       event: "change"
   },
    methods: {
        Change(e: any) {
            this.$emit("change", e.target.checked);
        }
    }
}
</script>

vue3: 实现原理同于vue2，写法上不太相同。（方法写在setup中return出来，也可以写在methods中）
不同点：emit时的第一个事件变成update:【变量名】，父组件在v-model变成v-model:[变量名]，其他新的vue3新写法就不描述了

update&sync
父组件绑定变量:temp.sync="temp"
子组件中监听事件的回调函数中emit派发事件this.$emit("update:temp", temp)
写法类似vue3的v-model的实现

1. Input的v-model实现

<template>
    <input type="text" :value="val" @input="Update" />
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
   props: {
       val: String,
   },
    setup(props, context) {
        const Update = (e: KeyboardEvent) => {
            const targetValue = (e.target as HTMLInputElement).value
            context.emit("update:val", targetValue)
        }
        return {Update}
    },
    // methods: {
    //     Update(e: any) {
    //         this.$emit("update:val", e.target.value);
    //     }
    // }
})
</script>

2. Checkbox的v-model实现(需要通过model指定属性和事件)
   这里的checkbox不需要设置model属性，按照上面的描述实现即可

• 这里有一个问题写在setup中的change方法拿不到target，我把他写在methods中，但是输入框却可以，原因待寻。

<template>
    <input type="checkbox" :checked="checked" @change="Change" />
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
   name: "Checkbox",
   props: {
       checked: Boolean
   },
//    setup(props, context) {
//        const Change = (e: KeyboardEvent) => {
//            const targetValue = (e.target as HTMLInputElement).checked
//            context.emit("update:checked", targetValue)
//        }
//        return Change;
//    },
    methods: {
        Change(e: any) {
            console.log(e.target.checked)
            this.$emit("update:checked", e.target.checked);
        }
    }
})
</script>

父组件

<component-1 v-model:val="val"></component-1>{{val}}
<component-2 v-model:checked="checked"></component-2>{{checked}}

checkbox v-model和value和checked

1. <input type="checkbox" v-model="checked" >时checkbox选中checked值为true, 未选中为false,似乎与checked一致；
2. 当checked为数组，且绑定了value时<input type="checkbox" v-model="checked" value="选中了没">当选中时checked为[“选中了没”]，没选中checked为[] 与value保持一致。

结论：v-model与value保持一致，只是在未显性指定value值时，value值与checked报纸一致。
应用：在实现多选框时，即可绑定显性value值以及v-model一个数组。

参考博文： https://www.jianshu.com/p/b7b3ee54d7a0