Vue.js VueJS组件输入同步

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

如果没有组件，我将创建一个新的

Vue

实例，然后将我的

数据设置为所需。然后使用
v-model
，将一个输入绑定到该数据，然后可以从该输入操作该数据

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

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


我希望组件中的输入双向绑定到err变量，就像下面的非组件版本一样

我将如何做到这一点

我基本上希望创建可以用ajax数据实例化的组件，然后填充输入。然后输入可以更新数据，我可以使用save方法将数据发送到服务器。甚至可以使用组件来实现这一点吗？
因此有两件事：


你所使用的外部资源不知何故是错误的。我用过
jsfiddle
default
Vue
实例，它工作正常
声明组件时，不应将数据定义为对象，而应将其定义为返回对象的函数。请看这里：

这里有一个工作示例：
所以有两件事：


你所使用的外部资源不知何故是错误的。我用过
jsfiddle
default
Vue
实例，它工作正常
声明组件时，不应将数据定义为对象，而应将其定义为返回对象的函数。请看这里：

这里有一个工作示例：
是的，使用组件，可以像使用实例一样完成反应性

组件的一个缺点是，
数据
必须是返回对象的函数

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

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

Vue.component（'ii'{
模板：“{{err}}
”，
数据：函数（）{
返回{
错误：123
}
}
})

Fiddle:
是的，使用组件，可以像使用实例一样实现反应性

组件的一个缺点是，
数据
必须是返回对象的函数

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

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

Vue.component（'ii'{
模板：“{{err}}
”，
数据：函数（）{
返回{
错误：123
}
}
})

FIDLE:
如果编辑123输入中的文本，则输入左侧的文本不会更新。如果编辑Hello输入中的文本，左侧的文本将更新。我希望组件输入旁边的123绑定到输入值。这就是不起作用的地方，即使在你的例子中，改变：v型价值对我来说是有效的。我不知道为什么我没有尝试，文档中没有提到它。谢谢：）如果编辑123输入中的文本，则输入左侧的文本不会更新。如果编辑Hello输入中的文本，左侧的文本将更新。我希望组件输入旁边的123绑定到输入值。这就是不起作用的地方，即使在你的例子中，改变：v型价值对我来说是有效的。我不知道为什么我没有尝试，文档中没有提到它。谢谢：）