【study】v-model如何实现

甜酸混合物1226

2024-08-03 146 阅读1分钟

1、v-model是什么？

在 Vue.js 中，v-model 是一个用于双向数据绑定的指令，广泛应用于表单控件。使用 v-model 可以让视图和数据之间保持同步。

2、实现一个自定义组件的 `v-model` 绑定主要涉及以下几个部分：

绑定内部状态。
同步外部状态。
自定义事件。

3、实现 `v-model` 的基础

当使用 v-model 时，Vue.js 实际上是在内部做了以下两件事：

将一个 prop 传递进组件，通常称为 value。
监听一个名为 input 的自定义事件，用于更新父组件中的 value。

4、示例如下

// 子组件
<template>
  <input :value="value" @input="handleInput" />
</template>

<script>
export default {
  name: 'CustomInput',
  props: ['value'],
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

// 使用 `v-model`

<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

CustomInput 组件接收一个 value prop，这是 v-model 在父组件中绑定的值。
当 <input> 的 @input 事件被触发时，handleInput 方法会使用 this.$emit('input', value) 发出一个名为 input 的事件，把输入的值发送给父组件。

5、总结

v-model 是 Vue.js 提供的一个用于双向绑定的特殊语法糖。
实现 v-model 主要包含两个部分：绑定值的 prop 和触发更新的 event。
可以通过 model 选项自定义 v-model 的 prop 名和 event 名，以适应不同的需求。
适用于简单的输入控件和复杂的自定义组件。