搞定啦，让Vue父组件的prop传参变化时，子组件及时响应！

前端

2023-08-20 10:34:44

如何解决 Vue 子组件中父组件 Prop 传参变化后未更新的问题

开门见山，直击痛点

在 Vue 项目中，父子组件间的通信是至关重要的。然而，当父组件的 Prop 传参发生变化时，子组件却未接收到新值，这会带来不少麻烦，尤其是在子组件需要使用新值时。

深入分析，拨开迷雾

要解决这个问题，首先需要了解其根源：

子组件在初始化时获取父组件的初始 Prop 传参值。
当父组件的 Prop 传参变化时，子组件并不知情。
因此，子组件继续使用初始值，无法更新至新值。

解决之道，妙计在手

明了问题所在后，解决方法也水到渠成了。我们可以通过以下步骤让子组件及时响应父组件 Prop 传参的变化：

在子组件中，使用 watch 函数监听父组件 Prop 传参的变化。
当父组件 Prop 传参变化时，触发 watch 函数。
在 watch 函数中，更新子组件的数据。
子组件的方法即可使用更新后的数据。

代码示例，一目了然

以下是利用 watch 函数监听父组件 Prop 传参变化的代码示例：

// 父组件
<template>
  <div>
    <input v-model="fatherId">
    <child-component :father-id="fatherId"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fatherId: 1
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>Father ID: {{ fatherId }}</p>
    <button @click="callMethod">Call Method</button>
  </div>
</template>

<script>
export default {
  props: ['fatherId'],
  data() {
    return {
      // 这里使用 fatherId 来保存父组件传来的值
      fatherId: this.fatherId
    }
  },
  watch: {
    fatherId(newVal, oldVal) {
      // 当父组件 Prop 传参变化时，触发此函数
      this.fatherId = newVal;
    }
  },
  methods: {
    callMethod() {
      // 使用更新后的 fatherId 调用方法
      console.log(`Father ID: ${this.fatherId}`);
    }
  }
}
</script>