[JavaScript知识库]【vue3学习系列】如何改写v-model

简单写法

props: {
   modelValue: String, // 接收值
},
setup(props, context) {
	// 输入框数据
    const inputRef = reactive({
        val: props.modelValue || "", // 如果没有传入值，就给''
    });
    // 输入框输入事件
    const updateValue = (e: KeyboardEvent) => {
        const targetVlaue = (e.target as HTMLInputElement).value; // 获取到输入框的输入内容
        inputRef.val = targetVlaue;
        context.emit("update: modelValue", targetVlaue); // 发送出去
    };
    return {
        validateInput,
        updateValue,
    };
}

// 在模板中
<input type="text" :value="inputRef.val" @input="updateValue">

在父组件中：

<my-component v-model="value">

未来不定期补充…