如何使用Vue实现自定义双向数据绑定？

前端可樂

已于 2023-06-06 10:33:44 修改

阅读量2.7k

点赞数 3

分类专栏： Vue 文章标签：前端 vue.js

于 2023-06-06 10:23:14 首次发布

本文链接：https://blog.csdn.net/m0_67460846/article/details/131052905

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

理解Vue的双向数据绑定

在 Vue 中，双向数据绑定是一项非常强大的功能，它能够使数据和视图之间保持同步，让开发者更加方便的操作数据，在本文中我们将介绍如何用Vue实现数据的双向绑定，实现方法主要有以下两种：

.sync修饰符实现双向数据绑定

.sync 修饰符简化了属性&事件传值的双向绑定的模式，虽然比 v-model 的方式稍微麻烦点，但是支持多个数据在组件上双向绑定。

使用 .sync 修饰符修饰一个单项绑定到组件的属性，会默认绑定一个 update:myPropName 的事件，myPropName 是绑定的属性名。

注：这里提到的 update:myPropName 事件是由 Vue 自动添加的，不需要我们手动去定义或者声明。

修改 New.vue 组件如下：

<template>
  <!-- 监听input事件，提交.sync修饰符提供的update:<myPropName>事件 -->
  <input :value="value" @input="$emit('update:value',$event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

再新建一个 .vue 文件引入 New.vue 并使用：

<template>
  <div id="home">
    <New :value.sync="query"/>
    {{query}}
  </div>
</template>

<script>
import New from '../components/New'
export default {
  components: { New },
  data() {
    return {
      query: null
    }
  }
}
</script>

自定义组件实现双向数据绑定

注：除了表单元素外，我们也可以使用自定义组件实现数据的双向绑定。

首先，我们需要定义一个自定义组件，并在其中使用 v-model 指令绑定数据。然后，我们需要在组件中定义一个名为 value 的 prop ，并在组件中使用 $emit() 方法触发一个名为 input 的事件。这样就可以在父组件中使用 v-model 指令绑定自定义组件的值了。
例如，下面是一个自定义的数字输入框组件（New.vue）：

<template>
  <div>
    <input type="number" :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

在上面这个例子中，我们使用了一个 input 元素来绑定value属性，并在输入时使用 $emit() 方法触发了一个名为 input 的事件。

现在，我们就可以在父组件中使用 v-model 指令来绑定自定义组件的值了：

<template>
  <div>
    <New v-model="count"></New>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import New from './New.vue'

export default {
  components: { New },
  data() {
    return {
      count: 0
    }
  }
}
</script>