为什么子组件的 v-model 不会从发射更改为父组件？

Question

我正在为我的 VueJS 应用程序创建一个数字文本输入，它将允许在文本字段中评估 math.js 表达式。这个想法是，在模糊或在文本框中按 Enter 时，如果可能，将对表达式进行评估。

<template>
  <v-text-field
    v-model="localValue"
    @blur="onBlur"
    @keydown="onKeydown"
  />
</template>

<script>
import { create, all } from 'mathjs'
const math = create(all)

export default {
    name: "NumericTextField",
    props: ["value"],
    data () {
        return {
            localValue: this.value
        }
    },
    methods: {
        onKeydown (e) {
            if (e.key === "Enter") {
                this.compute()
            }
        },
        onBlur () {
            this.compute()
        },
        compute () {
            try {
                const result = math.evaluate(this.localValue)
                this.$emit("input", result)
            } catch (e) {
                console.log(e)
            }
        },
    },
}
</script>

我看到数据通过 emit 语句传播出去。但是，新值一旦计算出来，就不会回流到文本字段的 v-model 中。我已经在我的数据函数上尝试了一个 console.log，并且在发射完成后我实际上看到了新的 this.value。因此，如果我在字段中键入 1+1 并按 Enter，我将看到发射显示 2 的 console.log，并且重新计算的数据也显示 this.value 现在是 2。但是，视觉输出是 v-text-field 的数据没有变化，文本框中仍然显示1+1。这是为什么呢？

Answer 1

有两种方法可以实现这一点。

选项 1 - 将 v-model 绑定到局部变量，但观察 prop 值的变化并在 prop 变化时更新局部变量：

<template>
  <v-text-field v-model="localValue" @blur="compute" @keydown.enter="compute" />
</template>

<script>
import { create, all } from "mathjs";
const math = create(all);

export default {
  name: "NumericTextField",
  props: ["value"],
  data() {
    return {
      localValue: this.value
    };
  },
  watch: {
    value: function(newVal) {
      this.localValue = newVal;
    }
  },
  methods: {
    compute() {
      try {
        const result = math.evaluate(this.localValue);
        this.$emit("input", result);
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

选项 2 - 使用 value 作为输入值，但在单独的局部变量中跟踪 v-text-field 的变化。这样你就不需要使用手表了。

<template>
  <v-text-field :value="value" @blur="compute" @keydown.enter="compute" @input="onInput" />
</template>

<script>
import { create, all } from "mathjs";
const math = create(all);

export default {
  name: "NumericTextField",
  props: ["value"],
  data() {
    return {
      localValue: this.value
    };
  },
  methods: {
    compute() {
      try {
        const result = math.evaluate(this.localValue);
        this.$emit("input", result);
      } catch (e) {
        console.log(e);
      }
    },
    onInput(val) {
      this.localValue = val;
    }
  }
};
</script>

Answer 2

这是因为通过使用 v-model，你改变了 localValue，它不再等于 this.value。您应该尝试完全删除 localValue，并改用 this.value。

<v-text-field
    v-model="value"
    @blur="compute"
    @keydown.enter="compute"
/>

compute () {
   try {
       const result = math.evaluate(this.value)
          this.$emit("input", result)
            } catch (e) {
                console.log(e)
            }
        },

Answer 3

尝试使用value 属性将文本字段直接绑定到value 属性并删除localValue

<template>
  <v-text-field
    :value="value"
    @blur="compute"
    @keydown.enter="compute"
  />
</template>

<script>
import { create, all } from 'mathjs'
const math = create(all)

export default {
    name: "NumericTextField",
    props: ["value"],
    methods: {
        compute () {
            try {
                const result = math.evaluate(this.value)
                this.$emit("input", result)
            } catch (e) {
                console.log(e)
            }
        },
    },
}
</script>

如果上面的例子不起作用，试试下面的

<template>
  <v-text-field v-model="localValue" @blur="compute" @keydown.enter="compute"
 
  />
</template>

<script>
import { create, all } from "mathjs";
const math = create(all);

export default {
  name: "NumericTextField",
  props: ["value"],
  data() {
    return { localValue: "" };
  },
  watch: {
    value(v) {
      this.localValue = v;
    },
  },
  methods: {
    compute() {
 
      try {
        const result = math.evaluate(this.localValue);
        this.$emit("input", result);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

LIVE DEMO