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" />
文章來源地址http://www.zghlxwxcb.cn/news/detail-714607.html
文章來源:http://www.zghlxwxcb.cn/news/detail-714607.html
到了這里,關(guān)于vue2 系列:自定義 v-model的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!