#父组件
<a-card class="card" title="基本信息" :bordered="false">
<additional-base ref="additionalBase" :product.sync="product" :isArea.sync="isArea" :isUpdate="isUpdate" />
</a-card>
主要语句
:product.sync="product"
#子组件
<a-form-item
label="险种选择"
fieldDecoratorId="product.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择险种', whitespace: true}]}"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-select placeholder="请选择险种" v-model="product.name" :showSearch="true" @search="searchProduct" :disabled="isUpdate">
<a-select-option v-for="(item, index) in list" :key="index" :value="item.name">{{item.name}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="产品代码"
fieldDecoratorId="product.product_id"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入产品代码', whitespace: true}, {validator: productExists}]}"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input v-model="product.product_id" :disabled ="isUpdate"/>
</a-form-item>
props: ['product']
watch: {
'product.name': function() {
if (this.list.length === 0) return
for (let i = 0; i < this.list.length; i++) {
if (this.product.name === this.list[i].name) {
this.product = _.pick(this.list[i], ['_id', 'product_id', 'name', 'desc', 'tags', 'avatar'])
this.$emit('update:product', this.product)
break
}
}
}
主要语句:
v-model="product.name"
props: ['product']
this.$emit('update:product', this.product)
注意: this.$emit(‘update:product’, this.product)中的’update:product’一定不能有空格,我就在这上面花了大把时间!!!!