Vue.js 子组件接收父组件数据并更新：动态传递 PID 值

在 Vue.js 中，您可以通过 props 将父组件的数据传递给子组件。当您需要动态更新子组件中的数据时，可以使用 watch 属性来侦听父组件数据变化并更新子组件中的相应数据。

如何动态传递 PID 值并更新子组件数据

1. 在父组件中传递 PID 值：

<template>
  <child-component :pid='pid' ref='childComponent'></child-component>
</template>

<script>
export default {
  data() {
    return {
      pid: 123 // 例如，您的 PID 值
    }
  }
}
</script>

2. 在子组件中接收 PID 值并更新：

<script>
export default {
  props: {
    pid: {
      type: Number,
      required: true
    }
  },
  watch: {
    pid() {
      this.sizeForm.classifyPid = this.pid;
      console.log(222, this.sizeForm.classifyPid);
    }
  }
}
</script>

解释：

• 使用 props 将父组件的 pid 值传递给子组件。
• 使用 watch 侦听 pid 属性的变化，并在变化时将 pid 值赋给子组件的 this.sizeForm.classifyPid。

通过以上步骤，您就可以将父组件的 PID 值动态传递给子组件，并确保子组件在重新打开弹窗时也能获取最新的 PID 值。