vuejs2 - 在具有计算属性值的输入上使用@input 或@change

Question

我正在尝试设置一个组件，该组件通过 v-model 将计算属性传递回父级。
在 https://v2.vuejs.org/v2/guide/components.html#_carbonads_projs 的文档中使用输入的直接值而不是计算属性对此进行了解释。

到目前为止，我已经按照文档获得了基本功能，但我现在想将发出事件/向父级发送数据的输入值设置为计算属性的值。我可以将值设置为计算属性，这没问题，但事件永远不会触发(查看 vue 开发工具)

下面的代码有效，无论输入中输入什么，都会发出一个事件，并更新父级上的相关数据

<input type="text" v-bind:value="value" v-on:change="$emit('input', $event.target.value)">

//parent call to component
<time-picker v-model="parentData"></time-picker>

但是，如果我这样设置，并通过更改一些其他输入来导致 computedProp 发生变化，则不会触发任何事件，尽管我看到输入值发生变化。 (我也试过调用自定义方法而不是发出事件，但该方法也没有运行)

<input type="text" v-bind:value="computedProp" v-on:change="$emit('input', $event.target.computedProp)">

我也尝试过使用 v-model 而不是 v-bind:value，但仍然没有任何事件

<input type="text" v-model="computedProp" v-on:change="$emit('input', $event.target.value)">

但是，如果我直接在具有 v-bind:value="computedProp" 的输入中键入，则会发出一个事件(尽管没有正确的数据)

这让我怀疑当计算属性更新时@input 和@change 没有触发，即使这会导致所述输入的值发生变化。我应该使用 @change 或 @input 的替代方法来监视计算属性吗？

理想情况下，我不想在子级中发出事件并手动捕获它并在父级中分配数据，因为该组件将在同一个父级中多次使用，并且会更方便直接在每个实例上使用 v-model。

或者，我是不是完全找错了树，是否有另一种/更好的方法将计算属性传递给调用组件时指定的 v-model？

非常感谢:)

Answer 1

input 和 change 事件监听器由用户在输入时发出。以编程方式更改值不会触发事件。

有一种方法可以trigger the event programmatically .但我想建议你使用 Vue watcher反而。它更干净、更容易。

就这么简单

  watch: {
    computedProp(newValue) {
      this.$emit("input", newValue);
    }
  }

这样做的目的是，Vue 将监视 computedProp 的值，以便每次它的值发生变化时，this.$emit("input", newValue); 将被执行。这就是您想要的。