1. input 中的 v-model
<!-- 表单双向绑定 -->
<input :value="username" @input="username = $event.target.value" />
<!-- 等于 -->
<input v-model="username" />
2. 自定义组件 v-model
<!-- 组件双向绑定 -->
<!-- 子 -->
<script>
export default {
props: {
value: {
required: true,
},
},
watch: {
value(newValue) {
this.my_input = newValue;
},
},
data() {
return {
my_input: this.value,
};
},
methods: {
handleChange() {
this.$emit("input", this.my_input);
},
},
};
</script>
<template>
<el-input v-model="my_input" @change="handleChange"></el-input>
</template>
<!-- 父 -->
<my-component v-model="username" />
文章来源地址https://www.toymoban.com/news/detail-714607.html
文章来源:https://www.toymoban.com/news/detail-714607.html
到了这里,关于vue2 系列:自定义 v-model的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!