Vue 中如何设置 props 的默认值？

推荐答案

在 Vue 中，可以通过在 props 对象中使用 default 属性来设置默认值。示例如下：

-- -------------------- ---- -------
------ ------- -
  ------ -
    ------ -
      ----- -------
      -------- -------- ------
    --
    ------ -
      ----- -------
      -------- -
    --
    --------- -
      ----- --------
      -------- -----
    --
    ------ -
      ----- ------
      -------- -- -- --
    --
    ------- -
      ----- -------
      -------- -- -- ----
    -
  -
-

本题详细解读

1. 基本用法

在 Vue 组件中，props 用于接收父组件传递的数据。为了确保即使父组件没有传递某些 props，组件也能正常工作，可以为 props 设置默认值。

2. 默认值的类型

• 基本类型：如 String、Number、Boolean 等，可以直接使用字面量作为默认值。
• 引用类型：如 Array 和 Object，必须使用工厂函数返回默认值，以避免多个组件实例共享同一个引用对象。

3. 示例解析

• title 是一个字符串类型的 prop，默认值为 'Default Title'。
• count 是一个数字类型的 prop，默认值为 0。
• isActive 是一个布尔类型的 prop，默认值为 false。
• items 是一个数组类型的 prop，默认值为一个空数组，使用工厂函数 () => [] 返回。
• config 是一个对象类型的 prop，默认值为一个空对象，使用工厂函数 () => ({}) 返回。

4. 注意事项

• 如果 props 的类型是 Array 或 Object，必须使用工厂函数返回默认值，否则可能会导致多个组件实例共享同一个引用对象，引发意外的副作用。
• 默认值仅在父组件没有传递该 prop 时生效。如果父组件传递了 null 或 undefined，默认值也会生效。