v-model与.sync父组件和子组件之间传递数据

本文详细介绍了在Vue项目中如何实现父组件与子组件之间的数据传递和状态同步,重点解析了props和$emit的使用技巧,以及如何在子组件中监听父组件的数据变化并进行响应式更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#父组件

<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’一定不能有空格,我就在这上面花了大把时间!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值