正在尝试创建通用输入组件
我有很多表单要在我正在开发的web应用程序中创建，为此我使用了Vue，所以我一直在尝试创建一个可以在整个过程中使用的通用输入组件。我使用的是Bootstrap grids，所以我的想法是我应该能够向组件传递一些要占用的列、一个标签、一个名称和一个用作v-model的属性。我想我已经接近这个目标了，但是我遇到了一个关于props - Vue warn的问题:避免直接修改prop，因为只要父组件重新渲染，这个值就会被覆盖。相反，应使用基于属性值的数据或计算属性。属性发生了变化："model“(在组件中找到)。以下是模板(简化形式)：
<template id="field">
<div v-bind:class="colsClass">
<div class='form-group form-group-sm'>
<label v-bind:for="name">{{labelText}}</label>
<input v-bind:id='name' ref="input" class='form-control' v-bind:name='name' v-model='model'/>
</div>
</div>
下面是(再次简化的) JS：
Vue.component('field', {
template: '#field',
props: ['cols','label','group','name','model'],
computed:{
colsClass:function(){
return "col-xs-"+this.cols
}
,
labelText:function(){
if(this.label) {
return this.label
} else {
return _.startCase(this.name);
}
}
}
});这是在另一个'edit-product‘组件中使用的，如下所示：
<field :cols="8" name="name" :model="product.name"></field>当我编辑该字段的值时，这将显示OK，但会抛出错误(或者更准确地说，是警告)。那么我到底做错了什么呢？
回答 2
Stack Overflow用户
发布于 2016-11-25 00:05:02
正如警告所建议的那样，您不应该直接编辑为该值传递的属性。
取而代之的是使用它作为原始值，并对来自它的输入设置一个单独的值-您可以将其传递给v-model。如果您需要父对象具有当前值，则还需要传递一个prop，它将允许您更新父对象上的参数。
输入组件
# script
props: [
'origValue',
'valueChange',
],
data: {
inputValue: '',
...
},
mounted () {
this.inputValue = this.origValue
},
watch: {
inputValue () {
this.valueChange(this.inputValue)
},
...
},
...
# template
<input type="text" v-model="inputValue">父
# script
data () {
return {
fieldValue: 'foo',
...
},
},
methods: {
updateField (value) {
this.fieldValue = value
},
...
},
...
# template
<field :value-change="updateField" :orig-value="fieldValue"></field>Stack Overflow用户
发布于 2016-11-25 02:41:45
实际上，我所寻求的解决方案比上面建议的要简单得多，实际上非常简单，取自https://forum-archive.vuejs.org/topic/4468/trying-to-understand-v-model-on-custom-components/9。
我不想要'model‘属性，我有一个'value’属性，所以JS改为这样：
Vue.component('field', {
template: '#field',
props: ['cols','label','group','name','value'],
computed:{
colsClass:function(){
return "col-xs-"+this.cols
}
,
labelText:function(){
if(this.label) {
return this.label
} else {
return _.startCase(this.name);
}
}
}
});模板变成了这样：
<div class='form-group form-group-sm'>
<label :for="name">{{labelText}}</label>
<input :id='name' :name='name' class='form-control' :value="value" @input="$emit('input', $event.target.value)"/>
</div>
</div>
我这样使用它：
<field :cols="8" name="name" v-model="product.name"></field>不同的是，我实际上并不是在试图传递一个模型支撑，我只是传递一个值，并侦听对该值的更改。它似乎工作得很好，而且足够干净和简单。我的下一个挑战是向输入传递一组任意的属性，但这是另一个问题的主题。
https://stackoverflow.com/questions/40790278
复制相似问题
腾讯云开发者
