Storybook 里 Vue 组件的 props 默认值不生效？

UX恒博提问于 2026-03-09 15:16:22 阅读 39

工具

我在 Storybook 里写了个带默认值的 Vue 组件，但预览时 props 的默认值没显示出来，明明本地用是正常的，是不是我写法有问题？

试过在 argTypes 里手动指定 defaultValue，也试过直接在组件里用 defineProps 设置默认值，都不行。控制台也没报错，就是 Storybook 面板里那个字段空着。

<script setup>
defineProps({
  title: {
    type: String,
    default: '默认标题'
  }
})
</script>

<template>
  <h2>{{ title }}</h2>
</template>

组件开发

我来解答赞 8 收藏

反馈

2 条解答

Code°欣辰 Lv1

啊这个坑我也踩过，Storybook对Vue3的默认值处理确实有点迷。你的写法本身没问题，但Storybook需要额外配置才能正确显示。

试试这个写法，在.stories.js文件里：

export default {

  component: YourComponent,

  args: {

    title: '默认标题' // 这里手动指定默认值

  }

}

更好的写法是用argTypes配合defaultValue：

argTypes: {

  title: {

    control: 'text',

    defaultValue: '默认标题' // 这个才是Storybook能识别的

  }

}

另外注意，在Storybook 6.4+版本里，defaultValue可能要用table配置：

argTypes: {

  title: {

    table: {

      defaultValue: { summary: '默认标题' }

    }

  }

}

组件里的defineProps默认值其实是对的，只是Storybook不会自动读取而已。建议两边都配置，这样本地开发和文档展示都不会有问题。

2026-03-10 12:14

轩辕依甜 Lv1

Storybook 6+ 的 Vue3 支持确实有点坑，这个我踩过。问题出在 Storybook 的 args 机制会覆盖组件默认值，得这么改：

1. 首先确保你的 Story 文件里没有手动设置 args.title，有的话删掉

2. 更可靠的写法是同时设置 argTypes 和 default 参数：

export default {

  component: YourComponent,

  argTypes: {

    title: {

      control: 'text',

      defaultValue: '默认标题' // 这里必须和组件内一致

    }

  }

}

3. 如果还不行，可能是 Storybook 缓存问题，试试删掉 .storybook 目录重新启动

4. 终极解决方案是手动在 Template 里设置默认值：

const Template = (args) => ({

  components: { YourComponent },

  setup() {

    return { args: { title: '默认标题', ...args } }

  },

  template: ''

})

这个破问题折腾了我一下午，后来发现是 Storybook 的 args 机制设计问题。建议用第四种方案，虽然啰嗦点但最可靠。

2026-03-09 15:19