用于使用没有计算属性的 getter/setter 的自定义 vue 指令（如 v-model）[重复]答案

【问题标题】：Custom vue directive (like v-model) for using getter/setter without computed property [duplicate]用于使用没有计算属性的 getter/setter 的自定义 vue 指令（如 v-model）[重复]
【发布时间】：2021-07-08 14:40:05
【问题描述】：

我正在创建一个组件系统，让其他开发人员使用这些组件编写 vue 应用程序，以便使用简单的表单快速启动和运行。

我的组件非常通用，并且希望将纯值绑定到它们的 value 属性，并将发出带有 input 事件的纯值。

我们希望组件控制的数据很复杂。我读过您不能将类用作 vue 数据，因为 vue 需要纯 javascript 对象作为数据。所以每条数据都是一个像

的对象

{
  _value: ...
  setVal(): ...
  getVal(): ...
}

我们像绑定一样

<my-component
  :value="dataObject.getVal()"
  @input="dataObject.setVal($event)"
/>

我认为可以编写一个 vue 指令来简写这些属性，例如 v-model 通常是 :value 和 @input 的简写，这样我就可以编写

<my-component v-my-directive="dataObject" />

它会自动将正确的东西绑定到 :value 并将正确的东西绑定到 @input，但它似乎没有那么简单。我发现教程提到了 Vue v1 指令的双向，但在 Vue v2 中被删除，它建议使用包装器组件作为替代。但是我们有一个庞大的组件库，为每个组件编写和维护一个包装器似乎与创建一个已经存在的速记一样不合时宜。有没有其他办法？

【问题讨论】：

这能回答你的问题吗？ Pass data to a directive?
那根本不回答问题，Steven 的回答可能更接近一点，至少是权威的“不，那不可能”。在我的示例中，我清楚地展示了如何将数据传递给指令（dataObject 引用）。这是从添加指令的子组件发出的数据的绑定，返回到附加该指令的父组件（好像指定了@input="dataObject.setVal($event)"），这似乎是不可能的。
我无法添加答案，因为这个答案关闭不正确，但我们决定为 dataObject 创建一个代理，并传递一个虚拟键作为绑定。例如。 “v-model="createProxy(dataObject)._”，然后代理忽略“_”键并使用适当的 getter 和 setter（如果适用）。我将打开一个新问题并自己更详细地回答它其他人对此评论表示赞同，表明他们正在寻找更详细的答案。

标签： vue.js vuejs2

【解决方案1】：

vue2 只允许 v-model 指令绑定到 :value/@input。所以你需要同时使用 v-bind 和 @on 指令来进行 2 路绑定。

vue3 使用允许多个 v-model 绑定的约定将这些结合起来

您创建一个名为“foo”的道具，并使用您想要分配给它的值发出一个名为“update:foo”的事件。

父组件使用v-model:foo绑定到它。

【讨论】：