VueJS 组件输入同步

Question

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

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

但是，将相同的代码转换为组件后，我终生无法在组件中获取任何输入以绑定到其数据。我已经尝试了 props、:data.sync、data 属性，但无论我尝试了什么，组件中的输入什么都不做。

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

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

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

我该如何完成？

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

Answer 1

所以有几件事：

您使用的外部资源有问题。我用过 jsfiddle 默认 Vue 实例并且工作正常。
声明组件时，不应将数据定义为对象，而应定义为返回对象的函数。阅读此处：https://vuejs.org/guide/components.html#Component-Option-Caveats

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

Answer 2

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

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

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

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

Fiddle: https://fiddle.jshell.net/f0pdmLhy/25/

VueJS 组件输入同步

VueJS Component Input Sync

vue.js

two-way

vue-component