VueJS 组件输入同步

Posted 2023-02-23

【中文标题】VueJS 组件输入同步

【英文标题】：VueJS Component Input Sync

【发布时间】：2016-12-18 20:14:36

【问题描述】：

我想创建具有双向绑定到组件本地范围的输入的组件。

如果没有组件，我会创建一个新的Vue 实例，然后将我的data 设置为我需要的。然后使用v-model，将输入绑定到该数据，然后可以从输入进行操作。

但是，将相同的代码转换为组件时，我无法在组件中获得任何输入以绑定到其数据。我尝试过 props、:data.sync、data 属性，但无论我尝试过什么，组件中的输入都无济于事。

我创建了一个 JSFiddle 来说明这一点：

https://fiddle.jshell.net/f0pdmLhy/2/

我想要发生的是组件中的输入以两种方式绑定到 err 变量，就像下面的非组件版本一样。

我将如何做到这一点？

我基本上想创建可以用 ajax 数据实例化的组件，然后填充输入。然后输入可以更新数据，我可以使用保存方法将数据发送到服务器。这甚至可以使用组件来完成吗？

【参考方案1】：

所以有几件事：

您使用的外部资源出现了某种故障。我用过 jsfiddle 默认 Vue 实例，它工作正常。 声明组件时，不应将数据定义为对象，而应定义为返回对象的函数。在这里阅读：https://vuejs.org/guide/components.html#Component-Option-Caveats

这里有一个工作示例：https://fiddle.jshell.net/by4csn1b/1/

【讨论】：

如果编辑 123 输入中的文本，输入左侧的文本不会更新。如果您编辑 Hello 输入中的文本，则左侧的文本会更新。我希望将组件输入旁边的 123 绑定到输入值。即使在您的示例中，这也不起作用

将 :value 更改为 v-model 对我有用。我不知道为什么我没有尝试，文档没有提到它。谢谢:)

【参考方案2】：

是的，使用组件，响应性可以像使用实例一样完成。

组件的一个问题是data 必须是一个返回对象的函数。

另外，要保持双向绑定，请在输入中使用v-model。

Vue.component('ii', 
    template: '<span>err</span><input type="text" v-model="err"><hr>',
  data: function () 
    return 
       err: 123
    
  
)

小提琴：https://fiddle.jshell.net/f0pdmLhy/25/