北京专业网站建设网站推广/全球网络营销公司排名

vue3自定义组件v-model实例

注意：我这里是typescript的语法，只是有个别地方和js相比要确定一下类型，比如函数传参时，和使用input元素的value时

步骤如下：

• 现在父组件引用的子组件v-model绑定一个值inputVal
• 然后在子组件的props属性中的modelValue直接拿到的就是这个绑定值inputVal
• 在子组件的节点中v-bind动态绑定这个值，并且v-on监听一个事件
• v-on监听的这个事件中另e.target.value和传过来的modelValue值相等
• 并且用emit发送一个update事件，和e.target.value

父组件App.vue

<template><div><InputModel v-model="inputVal"/><span>{{inputVal}}</span></div>
</template><script lang="ts">
import { defineComponent,ref } from 'vue';
import InputModel from './components/InputModel.vue'export default defineComponent({name: 'App',components: {InputModel,},setup(){const inputVal = ref('hello')return{inputVal}}
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

子组件 InputModel.vue

<template><div><input type="text" @input="updateVal":value="changeVal"/></div>
</template><script lang="ts">
import { defineComponent , ref} from 'vue';export default defineComponent({props:{modelValue:String,},setup(props,context){// console.log(props.modelValue);const changeVal = ref(props.modelValue)const updateVal = (e: KeyboardEvent)=>{// console.log((e.target as HTMLInputElement).value);//获取到input元素里面的值，const targetVal = (e.target as HTMLInputElement).value // console.log(changeVal.value);// 令两个值相等(传过来的值和输入的值)changeVal.value = targetVal// 发送事件和值context.emit('update:modelValue',targetVal)}return{updateVal,changeVal}}
});
</script>

vue3自定义v-model的优点（较vue2）

不知道vue2的自定义v-model的可以点击：
vue一些高级特性
的第一栏目观看

vue2的缺点：

• 比较繁琐，子组件还要增加一个model属性
• 智能由于双向绑定多个值，不能够多个

vue3的提升：

• 完全摒弃了model属性
• 可以绑定多个值，因为直接传入的是函数