Vue 2 + Storybook：如何为Composition API声明的事件添加文档？

完全可行，给你两个实用方案：

方案一：组件内显式声明emits选项 #

Vue 2的@vue/composition-api提供的defineComponent支持emits选项，只要在组件里显式声明触发的事件，Storybook会自动识别并在事件区域展示。

组件代码示例：

<template>
  <button @click="handleClick">触发自定义事件</button>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  // 可直接传事件数组，也支持带描述的对象格式
  emits: {
    myEvent: '点击按钮时触发的自定义事件'
  },
  setup(props, { emit }) {
    const handleClick = () => {
      emit('myEvent', { content: '示例数据' })
    }

    return { handleClick }
  }
})
</script>

方案二：在Story参数中手动配置事件文档 #

如果不想修改组件代码，或者需要更灵活的事件描述配置，可以在对应的Story文件里，通过parameters.docs.events手动定义事件信息。

Story文件示例：

import MyComponent from './MyComponent.vue'

export default {
  title: '组件/MyComponent',
  component: MyComponent,
  parameters: {
    docs: {
      events: {
        myEvent: {
          description: '点击组件按钮时触发的自定义事件',
          // 配置事件参数的描述和类型
          args: {
            content: {
              description: '事件携带的自定义数据',
              type: { name: 'object' }
            }
          }
        }
      }
    }
  }
}

const Template = (args, { argTypes }) => ({
  components: { MyComponent },
  props: Object.keys(argTypes),
  template: '<MyComponent @myEvent="handleMyEvent" />',
  methods: {
    handleMyEvent(data) {
      console.log('接收到事件数据:', data)
    }
  }
})

export const 默认示例 = Template.bind({})

两种方案都能让你的myEvent事件显示在Storybook页面的事件区域里，按需选择即可。

内容的提问来源于stack exchange，提问作者Christian Benseler