在 Vue.js 中建立单向绑定主输入与子输入系列的指南

2024-03-20 20:37:42

如何在 Vue.js 中建立单向绑定主输入与子输入的系列

问题：子输入更改触发主输入更新

在使用 Vue.js 构建表单时，可能会遇到这样一个问题：当你希望子输入相互独立，但主输入更改时可以修改所有子输入时，却发现子输入的更改会触发主输入的更新。

解决方案：使用 `:value` 属性

解决此问题的方法是使用 :value 属性，而不是 v-model。v-model 是一种双向绑定，它同步子输入和主输入的值。相比之下，:value 是一种单向绑定，它允许主输入更新子输入的值，但子输入的更改不会影响主输入。

实现步骤

以下是如何使用 :value 属性在 Vue.js 中实现单向绑定的步骤：

1. 为子输入使用 :value

<template>
  <input :value="taxDefault" />
</template>

2. 在父组件中监听子输入的变化

<template>
  <input v-model="taxDefault" />
  <input :value="taxDefault" @change="updateTaxDefault" />
</template>

<script>
  methods: {
    updateTaxDefault(e) {
      this.taxDefault = e.target.value
    }
  }
</script>

代码示例

下面是一个完整的代码示例，展示了如何使用 :value 属性建立单向绑定：

父组件 (App.vue)

<template>
  <div>
    <input v-model="taxDefault" />
    <ChildInput :value="taxDefault" />
  </div>
</template>

<script>
  import ChildInput from "./ChildInput.vue"
  export default {
    components: { ChildInput },
    data() {
      return {
        taxDefault: 13
      }
    }
  }
</script>

子组件 (ChildInput.vue)

<template>
  <input :value="value" @change="updateValue" />
</template>

<script>
  export default {
    props: ["value"],
    emits: ["update:value"],
    methods: {
      updateValue(e) {
        this.$emit("update:value", e.target.value)
      }
    }
  }
</script>