vue 组件自定义v-model
Posted calamus
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件自定义v-model相关的知识，希望对你有一定的参考价值。
参考资料：vue官网
在vue 中使用v-model双向绑定
<input v-model="something">
其实是语法糖
<input :value="something" @:input="something = $event.target.value">
自定义组件使用v-model
//父组件中调用
<child v-model="msg" />
//子组件代码
<template>
<div>
<slot />
</div>
</template>
<script>
export default {
name:‘child‘,
componentName:‘child‘,
data(){
return {
childVal:null
}
},
//vue中v-model默认绑定的是input事件，value参数，如果需要其他自定义的事件和数据名作为绑定，需要设置model
model: {
prop: ‘value‘,
event: ‘change‘
},
props: {
value: {}
},
created(){
this.$emit(‘change‘, this.value);
},
}
</script>
以上是关于vue 组件自定义v-model的主要内容，如果未能解决你的问题，请参考以下文章
vue 自定义v-model的组件 修饰符无效，需要改怎么做！
[Vue深入组件]:v-model语法糖与自定义v-model