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

最新推荐文章于 2024-02-18 10:11:49 发布

原创最新推荐文章于 2024-02-18 10:11:49 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

webpack+vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在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’一定不能有空格，我就在这上面花了大把时间！！！！