vue3里面的v-model指令

第一步在components文件夹中 创建一个myInput.vue文件

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

<script>
import { ref } from 'vue'
export default {
    props: {
        modelValue: String // 这里要注意 vue2中 v-model在input框中使用其实就是v-bind：value 和 @input事件的组合
        // 但是在3.0中 绑定的值为modelValue 这也就是我这里问题产生的原因
    },
    //setup接收两个参数 第一个参数其实就是本页面中的props属性 不过这个参数不建议解构赋值，因为如果解构赋值会使数据失去响应式
    // 第二个参数是一个上下文对象 暴露了vue2中输入this的属性和方法解构大概是这样的
    <!--{ attrs: (...)
		emit: (...) 这里的emit可以实现在vue2中的 this.$emit的功能 只不过要更新v-model的数据需要使用update 类似于一千的sync修饰符的写法
		expose: exposed => {…}
		slots: (...)
		get attrs: ƒ attrs()
		get emit: emit() { return (event, ...args) => {…}
		get slots: ƒ slots()
		__proto__: Object
	}-->
    setup(props, ctx) {
        function iptChange(e) {
        	// ctx 这里通过emit来修改父组件中v