0

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

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

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

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

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

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

我将如何做到这一点？

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

4

2 回答 2

1

所以有几件事：

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

于 2016-08-12T00:53:44.143 回答
1

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

组件的一个问题是，它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/

于 2016-08-12T03:29:01.080 回答