Storybook Vue 组件

Question

新建了 storybook vue 之后，使用：

 .add('message', () => '<message />')

这种形式没有效果，必须完整声明：

  .add('as a message', () => ({
    components: { Message },
    template: '<message message="hello"></message>',
      methods: {
        action: action('clicked')
      }
  }))

完整示例：

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import Message from '../src/Message.vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

storiesOf('Button', module)
  .add('as a message', () => ({
    components: { Message },
    template: '<message message="hello"></message>',
      methods: {
        action: action('clicked')
      }
  }));

message 组件：

<template>
    <p @click='click'>
        {{this.message}}
    </p>
</template>

<script>
    export default {
        props:['message'],
        methods: {
            click() {
                alert('hello');
            }
        }
    }
</script>