vue自定义一个v-model的实现代码

目标

<template>
<my-form v-model="form">
</my-form>
</template>
<script>
export default {
data() {
return {
form: ''
}
}
}
<script>

实现

// my-form组件
<template>
<form>
<input v-model="model.val1" />
<textarea v-model="model.val2"></textarea>
<form>
</template>
<script>
export default {
model: {
prop: 'model',
event: 'change'
},
props: {
model: Object
}
watch: {
model(val){
this.$emit('change', val)
}
}
}
<script>

总结

以上所述是小编给大家介绍的vue自定义一个v-model的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• Vue表单demo v-model双向绑定问题
• vue中v-model的应用及使用详解
• 详解VUE自定义组件中用.sync修饰符与v-model的区别
• vue.js使用v-model指令实现的数据双向绑定功能示例
• 以v-model与promise两种方式实现vue弹窗组件
• vue如何在自定义组件中使用v-model
• vue项目中v-model父子组件通信的实现详解
• 利用vue组件自定义v-model实现一个Tab组件方法示例
• vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
• 浅析Vue自定义组件的v-model
• vue v-model动态生成详解