我正在尝试制作一组重复使用的组件。我要创建的组件是各种表单字段,例如 text、checkbox 等等。
我的父 vue 对象的 data 中有所有数据,并且希望在用户更改这些字段中的值后,这也是一个事实。
我知道如何使用 props 将数据传递给组件,并使用 emits 将它们再次传递回去。但是,我想避免为我添加的每个组件在我的父对象中编写一个新的“方法”。
<div class="vue-parent">
<vuefield-checkbox :vmodel="someObject.active" label="Some object active" @value-changed="valueChanged"></vuefield-checkbox>
</div>
我的组件是这样的:
Vue.component('vuefield-checkbox',{
props: ['vmodel', 'label'],
data(){
return {
value: this.vmodel
}
},
template:`<div class="form-field form-field-checkbox">
<div class="form-group">
<label>
<input type="checkbox" v-model="value" @change="$emit('value-changed', value)">
{{label}}
</label>
</div>
</div>`
});
我有这个 Vue 对象:
var vueObject= new Vue({
el: '.vue-parent',
data:{
someNumber:0,
someBoolean:false,
anotherBoolean: true,
someObject:{
name:'My object',
active:false
},
imageAd: {
}
},
methods: {
valueChange: function (newVal) {
this.carouselAd.autoOrder = newVal;
}
}
});
查看此 jsfiddle 以查看示例:JsFiddle
jsfiddle 是一个使用硬编码方法设置一个特定值的工作示例。我想在我使用该组件的地方内联编写所有内容,或者编写一个通用方法来更新父数据。这可能吗?
- 敏德
最佳答案
您可以在您的组件上使用 v-model。
使用 v-model
时在组件上,它将绑定(bind)到属性 value
它将在 input
上更新事件。
HTML
<div class="vue-parent">
<vuefield-checkbox v-model="someObject.active" label="Some object active"></vuefield-checkbox>
<p>Parents someObject.active: {{someObject.active}}</p>
</div>
Javascript
Vue.component('vuefield-checkbox',{
props: ['value', 'label'],
data(){
return {
innerValue: this.value
}
},
template:`<div class="form-field form-field-checkbox">
<div class="form-group">
<label>
<input type="checkbox" v-model="innerValue" @change="$emit('input', innerValue)">
{{label}}
</label>
</div>
</div>`
});
var vueObject= new Vue({
el: '.vue-parent',
data:{
someNumber:0,
someBoolean:false,
anotherBoolean: true,
someObject:{
name:'My object',
active:false
},
imageAd: {
}
}
});
fiddle 示例:https://jsfiddle.net/hqb6ufwr/2/
关于javascript - 输入字段作为更新父数据的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49299572/