Vue3封装input组件，年薪50W

import { ref } from ‘vue’

export default {

props: {

modelValue: String // 这里要注意 vue2中 v-model在input框中使用其实就是v-bind：value 和 @input事件的组合

// 但是在3.0中 绑定的值为modelValue 这也就是我这里问题产生的原因

},

//setup接收两个参数 第一个参数其实就是本页面中的props属性 不过这个参数不建议解构赋值，因为如果解构赋值会使数据失去响应式

// 第二个参数是一个上下文对象 暴露了vue2中输入this的属性和方法解构大概是这样的

setup(props, ctx) {

function iptChange(e) {

// ctx 这里通过emit来修改父组件中v-model的数据

ctx.emit(‘update:modelValue’, e.target.value)

}

return {

iptChange

}

}

}

在需要使用myInput的组件中