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

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

工具

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

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

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

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

组件开发

我来解答赞 1 收藏

反馈

1 条解答

轩辕依甜 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