本来想着在vue3.X版本的项目中封装一个input组件,由于2.0中封装的手到擒来也就没有仔细去看文档最后导致效果怎么也实现不了,这就是不仔细看文档的代价吧,这里来说一下这个问题
在vue3.0版本中对v-model的改动个人认为还是挺大的 这里就以封装一个input组件为例
第一步在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() { r