理解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 指令绑定数据。然后,我们需要在组件中定义一个名为 valueprop ,并在组件中使用 $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>

总结

Vue 中,使用自定义组件实现双向数据绑定适用于以下情况:

  1. 组件数据影响父组件数据
    当子组件的 data 改变时,父组件的数据也需要改变,此时需要使用双向绑定来同步两者的数据。

  2. 父组件数据影响子组件数据
    当父组件的数据变化时,子组件的数据也需要变化,同样需要双向绑定来更新子组件的数据。

  3. 兄弟组件间数据相互影响
    当一个组件的数据改变时,其他兄弟组件的数据也跟着发生变化,此场景下也需要使用自定义事件来实现双向绑定。

Logo

前往低代码交流专区

更多推荐