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

Question

我正在尝试设置一个组件，通过 v 模型将计算属性传递回父级。在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>

但是，如果我像这样设置，并通过更改其他一些输入来导致计算属性发生变化，则不会触发任何事件，尽管我看到输入的值发生了变化。（我也尝试过调用自定义方法而不是发出事件，但该方法也不运行）

<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- 会方便得多直接在每个实例上建模。

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

非常感谢 ：）

Answer 1

inputchange当输入内容被输入时，事件监听器由用户发出。以编程方式更改值不会触发该事件。

有一种方法可以通过编程方式触发事件。但我建议你改用Vue watcher。它更干净、更容易。

就这么简单

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

其作用是，Vue 将监视 的值，computedProp以便每次其值发生变化时this.$emit("input", newValue);都会被执行。这就是你想要的。