vue2 系列:自定义 v-model

简介: vue2 系列:自定义 v-model

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" />


目录
相关文章
|
1月前
|
JavaScript
Vue3的v-model说明和使用方法
Vue3的v-model说明和使用方法
60 1
|
1月前
|
JavaScript
vue v-model(二)
vue v-model(二)
|
1月前
|
JavaScript 编译器 数据安全/隐私保护
Vue3的v-model
Vue3的v-model
47 0
|
1月前
|
JavaScript 前端开发 API
Vue中v-model的原理
Vue中v-model的原理
|
8月前
|
JavaScript 前端开发
vue3 v-model的使用
vue3 v-model的使用
74 0
|
1月前
|
JavaScript
Vue的基本组件3.1(v-model)
Vue的基本组件3.1(v-model)
25 0
Vue的基本组件3.1(v-model)
|
10月前
|
JavaScript
Vue中v-model的使用
Vue中v-model的使用
51 0
|
1月前
|
JavaScript 开发者
Vue中v-model的原理是什么?
Vue中v-model的原理是什么?
24 0
|
10月前
|
JavaScript
[Vue]v-model收集表单数据
[Vue]v-model收集表单数据
|
10月前
|
JavaScript
Vue 自定义组件实现 v-model 数据双向绑定
Vue 自定义组件实现 v-model 数据双向绑定
102 0