Vue.js 组件中受计算属性影响的 Prop 如何动态更新？

vue.js

2024-03-05 16:15:43

动态更新 Vue.js 组件中受计算属性影响的 Prop

问题：动态更新 Prop 的需求

Vue.js 中的组件经常依赖于 Prop，Prop 是从父组件传递给子组件的数据。然而，有时需要动态更新一个 Prop 的值，以便根据另一个 Prop 的值做出反应。例如，当从 API 调用更新数据时，您可能需要更改 Prop 的值。

解决方案：使用 watch 和 computed

解决此问题的最佳方法是使用 watch 和 computed 功能。

watch： watch 允许您侦听一个属性或表达式的更改，并在更改时运行一个处理程序函数。
computed： computed 允许您定义一个计算属性，该属性基于其他属性的值计算。

实施

以下步骤演示如何使用 watch 和 computed 来动态更新 Prop：

侦听 Prop 的更改： 在 watch 对象中，添加一个处理程序来侦听 Prop 的更改。
更新计算属性： 在处理程序中，使用 newValue 来更新计算属性，该属性将包含更新后的 Prop 值。
使用计算属性： 在模板中，将计算属性用作 Prop 的值，以便它反映更新后的数据。

示例代码

以下是示例代码，说明如何使用 watch 和 computed 动态更新 Prop：

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    apiResponse: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      mlValues: {},
    };
  },
  watch: {
    apiResponse: {
      handler(newValue, oldValue) {
        this.mlValues.name = newValue.company.name;
      },
    },
  },
  computed: {
    accountValues() {
      return this.apiResponse ? this.mlValues : this.values;
    },
  },
  template: `<input :value="accountValues.name" />`,
});
</script>