当前位置：首页 > article >正文

分析 w-form-multiple-image.vue 文件中 console.log(v) 打印的内容

article 2025/2/25 8:46:44

文章目录

- - 父组件中的使用
  - 子组件中的 `console.log(v)`
  - 父组件中 `form` 的数据流
  - - 初始化
    - 用户上传图片
    - 保存时的处理
  - `console.log(v)` 的具体输出
  - 为什么有两个 `console.log(v)`？
  - 示例场景
  - 结论

下面这张图，是首次打开登记表单（也就是添加）控制台首次打印console.log(v)的内容

子组件（w-form-multiple-image）
父组件（ave-form）

准确地分析你的 w-form-multiple-image.vue 文件中 console.log(v) 打印的内容。这个父组件是一个对话框表单（ave-form），其中使用了 w-form-multiple-image 组件来处理“产品照片”和“购买记录”的多图上传。我们来一步步分析。

父组件中的使用

在你的父组件模板中，w-form-multiple-image 被用在了两个地方：

产品照片：

<w-form-multiple-image
  v-model="form.productPhotos"
  label="产品照片"
  label-width="120px"
  :operate-type="operateType"
  folder-name="fake-strategy"
  :limit="4"
/>

v-model="form.productPhotos"：绑定到 form.productPhotos，表示这个字段的值会通过 value 属性传入组件，并通过 input 事件更新。

购买记录：

<w-form-multiple-image
  v-model="form.purchaseRecords"
  label="购买记录"
  label-width="120px"
  :operate-type="operateType"
  folder-name="fake-strategy"
  :limit="4"
/>

v-model="form.purchaseRecords"：绑定到 form.purchaseRecords，类似上面。

子组件中的 `console.log(v)`

在你的 w-form-multiple-image.vue 文件中：

@Watch('value')
watchVal(v: any) {
  console.log(v)
  this.val = v
}

value：通过 @Prop 传入的值，这里对应父组件绑定的 form.productPhotos 或 form.purchaseRecords。
watchVal：当 value 变化时触发，v 是 value 的新值。
console.log(v)：打印 v 的值。

父组件中 `form` 的数据流

让我们看看 form.productPhotos 和 form.purchaseRecords 的值是如何变化的，从而确定 console.log(v) 的输出。

初始化

form 的定义：
```
private form: any = {}
```
- 初始时，form 是一个空对象，form.productPhotos 和 form.purchaseRecords 未定义（即 undefined）。

@Watch('value') 的初始化逻辑：

@Watch('value')
watchValue(v: any) {
  this.$nextTick(() => {
    this.getProducts()
    const formData = {
      ...v,
      productPhotos: v.productPhotos ? JSON.parse(v.productPhotos) : [],
      purchaseRecords: v.purchaseRecords ? JSON.parse(v.purchaseRecords) : []
    }
    this.form = formData
  })
}

value 是父组件传入的外部数据（通过 @Prop）。
如果 v.productPhotos 或 v.purchaseRecords 存在，会被 JSON.parse 解析为数组；否则，默认是空数组 []。
this.form 被更新为包含这些字段的对象。

初始输出：
- 如果父组件传入的 value 是 { productPhotos: '["img1.jpg"]', purchaseRecords: '["receipt1.jpg"]' }：
  - form.productPhotos 变为 ['img1.jpg']。
  - form.purchaseRecords 变为 ['receipt1.jpg']。
- 如果未传入 value 或字段缺失：
  - form.productPhotos 和 form.purchaseRecords 都是 []。
- 当 form.productPhotos 或 form.purchaseRecords 被赋值时，w-form-multiple-image 的 value 变为对应值，触发 watchVal，console.log(v) 打印：
  - 对于“产品照片”：['img1.jpg'] 或 []。
  - 对于“购买记录”：['receipt1.jpg'] 或 []。

用户上传图片

当用户通过 w-form-multiple-image 的 UploadImage 组件上传图片：
- handleUploadSucc(e) 被调用：
```
public handleUploadSucc(e: any) {
  this.$emit('input', e)
}
```
- e 是上传结果，通常是一个图片路径数组（如 ['newphoto.jpg']）。
- this.$emit('input', e) 更新父组件的 form.productPhotos 或 form.purchaseRecords。
- 父组件的 v-model 绑定导致 value 更新，触发子组件的 watchVal。
- console.log(v) 输出：
  - 如果上传到“产品照片”，打印 ['newphoto.jpg']。
  - 如果上传到“购买记录”，打印 ['newreceipt.jpg']。

保存时的处理

在 handleSubmit 和 save 中：

private handleSubmit() {
  // ...
  console.log(this.form.productPhotos)
  console.log(this.form.purchaseRecords)
  this.form.comparisonStatus = 1
  this.save()
}
private async save() {
  const data = {
    ...this.form,
    productPhotos: JSON.stringify(this.form.productPhotos),
    purchaseRecords: JSON.stringify(this.form.purchaseRecords)
  }
  const res: any = await esave(data)
  // ...
}

保存时，form.productPhotos 和 form.purchaseRecords 被转为 JSON 字符串。
但这不直接影响 console.log(v)，因为 v 是传入时的值。

`console.log(v)` 的具体输出

根据上下文，console.log(v) 打印的值是：

对于 <w-form-multiple-image v-model="form.productPhotos">：
- 初始：[]（如果父组件未传入数据）或 ['img1.jpg', ...]（如果传入并解析）。
- 上传后：['newphoto.jpg', ...]（用户上传的结果）。
对于 <w-form-multiple-image v-model="form.purchaseRecords">：
- 初始：[] 或 ['receipt1.jpg', ...]。
- 上传后：['newreceipt.jpg', ...]。

为什么有两个 `console.log(v)`？

因为你用了两个 w-form-multiple-image 实例：

一个绑定 form.productPhotos，打印与产品照片相关的数据。
一个绑定 form.purchaseRecords，打印与购买记录相关的数据。

示例场景

假设：

父组件传入 value = { productPhotos: '["initial.jpg"]', purchaseRecords: null }：
- 初始化后：
  - form.productPhotos = ['initial.jpg']，打印 ['initial.jpg']。
  - form.purchaseRecords = []，打印 []。
用户给“产品照片”上传一张图，返回 ['uploaded.jpg']：
- form.productPhotos 更新为 ['uploaded.jpg']。
- console.log(v) 打印：['uploaded.jpg']。
用户给“购买记录”上传两张图，返回 ['receipt1.jpg', 'receipt2.jpg']：
- form.purchaseRecords 更新为 ['receipt1.jpg', 'receipt2.jpg']。
- console.log(v) 打印：['receipt1.jpg', 'receipt2.jpg']。