vue组件封装 -- 双向绑定 v-model的本质

最新推荐文章于 2025-09-19 10:15:00 发布

原创最新推荐文章于 2025-09-19 10:15:00 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端 #es6 #javascript

vue 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析了Vue中v-model的本质及其如何实现父子组件之间的双向数据绑定。通过分解v-model为v-bind和@input，详细介绍了如何在子组件中接收和响应父组件的数据变化，并通过实例演示了具体的实现步骤。

引言

当我们在封装vue组件的时候，经常会想要父组件与子组件有一个双向绑定数据v-model，例如elementUI 的 input

但是，子组件和父组件是不能直接使用 v-model的，那么应该怎么做呢？

一、v-model的本质

所谓 v-model就是一个语法糖，实际上，它是由 v-bind(:)和 @input两个合在一起的一个缩写

也就是说：v-model 可以分解为：

v-bind
@input

例如 :

<input type="text" v-model="value">

等于：

<input type="text" :value="value" @input="handleInput">

handleInput (e) {
	this.value = e.target.value
}

二、实现父子组件的双向绑定

原理：

分解v-model，变成两个语法
利用父子组件的通信

父组件使用

<dh-input v-model="value"></dh-input>

子组件获取

<template>
  <div class="dh-input">
    <input :value="value"
           @input="handleInput">
  </div>
</template>
<script>
export default {
  name: 'DhInput',
  props: {
    value: null  // 使用v-bind 获取传来的数据
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value) // 使用子传父，发送数据
    }
  }
}
</script>