Question

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

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

但是，将相同的代码转换为组件，我不能在我的生活中获得组件中的任何输入以绑定到其数据。我尝试了道具，:data.sync，data属性，但无论我尝试过什么，组件内的输入都不会做任何事情。

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

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

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

我将如何做到这一点？

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

Answer 1

所以有几件事情：

您使用的外部资源有点错误。我已经习惯了 jsfiddle默认Vue实例，它运行正常。
声明组件时，不应将数据定义为对象，而应定义为返回对象的函数。请在此处阅读：https://vuejs.org/guide/components.html#Component-Option-Caveats

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

Answer 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/

VueJS组件输入同步

2 个答案: