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

Vue Prop 默认值深入解析：工厂函数与 rawProps 的正确使用

article 2025/1/5 0:23:04

在 Vue.js 中，prop 是组件接收外部数据的重要方式。我们常常为组件的 prop 设置默认值，确保在父组件没有传递值时，组件能正常工作。默认值可以是基本类型，也可以是对象、数组或函数。然而，很多开发者可能会在设置对象和函数类型的 prop 默认值时感到困惑。今天，我们就来深入探讨如何正确使用 Vue 中的 default 和 rawProps，并通过实际案例让你更加清晰地理解这些概念。

1. 函数类型的 `prop` 默认值

首先，让我们看一下函数类型的 prop。在 Vue 中，如果你为某个 prop 设置了一个函数类型，并且没有传递该 prop，Vue 会使用一个默认值。但与对象和数组不同，函数类型的 default 不需要是一个工厂函数，它是一个用来作为默认值的函数。

示例：函数类型的 prop

<template>
  <div>
    <button @click="executeCallback">Execute Callback</button>
  </div>
</template>

<script>
export default {
  name: 'CallbackComponent',
  props: {
    callback: {
      type: Function,
      default() {
        console.log("11111"); // 打印默认函数的执行
        return (message) => `Default message: ${message}`;
      }
    }
  },
  methods: {
    executeCallback() {
      console.log(this.callback('Test message'));
    }
  }
};
</script>

解释：

callback 是一个函数类型的 prop。
default 配置项提供了一个默认的点击事件处理函数。
default 中的 console.log("11111") 只会在父组件没有传递 callback 时执行。

父组件使用：

<template>
  <CallbackComponent />
</template>

<script>
import CallbackComponent from './CallbackComponent.vue';

export default {
  name: 'App',
  components: {
    CallbackComponent
  }
};
</script>

结果：

如果父组件没有传递 callback，则 default 函数会被执行，控制台会打印 11111，并且 callback 会返回默认的消息。
如果父组件传递了 callback，则 default 函数不会被执行。callback 会使用父组件传递的值，而不是默认函数。

注意：

default 函数只会在父组件没有传递 callback 时执行，并且你可以在 default 函数中打印日志或做其他的初始化操作。当父组件传递了 callback 时，default 函数的代码不会执行。

2. 对象和数组类型的 `prop` 默认值与 `rawProps` 的使用

当我们处理对象或数组类型的 prop 时，default 必须是一个工厂函数。这是因为对象和数组是引用类型，直接设置默认值可能导致多个组件实例共享同一个对象或数组。为了避免这种情况，Vue 强制要求我们通过工厂函数返回一个新的实例。

另外，Vue 允许在工厂函数中使用 rawProps，即接收到的原始 props，从而可以根据父组件传入的值动态设置默认值。

示例：使用 `rawProps` 设置对象类型的 `prop` 默认值

假设我们有一个 UserProfile 组件，接收一个 settings 对象类型的 prop，包含 theme 和 language。我们希望根据父组件传入的自定义设置来动态设置默认值。

<template>
  <div>
    <h1>User Profile</h1>
    <p>Theme: {{ settings.theme }}</p>
    <p>Language: {{ settings.language }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  props: {
    settings: {
      type: Object,
      default(rawProps) {
        // 默认的设置
        const defaultSettings = {
          theme: 'light',
          language: 'en'
        };

        // 如果父组件传入了 customSettings，使用它们覆盖默认值
        return rawProps.customSettings ? { ...defaultSettings, ...rawProps.customSettings } : defaultSettings;
      }
    }
  }
};
</script>

解释：

settings 是一个对象类型的 prop，我们希望它默认包含 theme 和 language。
default(rawProps) 是一个工厂函数，rawProps 是父组件传递的原始 props。
如果父组件传递了 customSettings，那么我们将用 customSettings 来覆盖默认设置。

父组件使用：

<template>
  <div>
    <UserProfile :settings="customSettings" />
  </div>
</template>

<script>
import UserProfile from './UserProfile.vue';

export default {
  name: 'App',
  components: {
    UserProfile
  },
  data() {
    return {
      customSettings: {
        theme: 'dark', // 自定义主题
        language: 'es' // 自定义语言
      }
    };
  }
};
</script>

结果：

如果 customSettings 被传递到 UserProfile 中，settings 会使用 customSettings 中的 theme 和 language（即 theme: 'dark', language: 'es'）。
如果没有传递 customSettings，则会使用默认值：theme: 'light', language: 'en'。

记忆已更新

好的，你的理解是对的。在 Vue 中，当父组件传递了 callback 的值时，default 函数不会被执行，因为 Vue 会使用父组件传递的 callback 值。而如果父组件没有传递该 prop，Vue 就会执行 default 中定义的默认函数。

我已经将这个说明加入到博客中，下面是更新后的博客内容：