如何将道具传递给组件的故事？答案

【问题标题】：How to pass props to component's story?如何将道具传递给组件的故事？
【发布时间】：2018-04-15 03:14:25
【问题描述】：

我想使用Storybook 为vue-select 组件添加一些故事，但我正在努力处理更复杂的情况，其中涉及传递道具或方法。

当我在模板中传递道具时它可以工作：

storiesOf('VSelect', module)
.add('with labeled custom options', () => ({
        components: {VSelect},
        template:   `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`
    }))

我觉得它不太可读，所以我想将它们分别作为道具或数据传递：

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        props:      {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        data:       {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        template:   `<v-select />`
    }))

但 data 和 props 都未被故事书识别 - 他们似乎被忽略了。

【问题讨论】：

标签： javascript vue.js storybook

【解决方案1】：

我已经解决了。

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        data() {
            return {
                options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]
            }
        },
        template:   `<v-select :options="options" />`
    }))

我以前的方法有两个问题：

传递的data 未包装在函数中
我应该只通过data。同时使用props 和data 似乎会使Vue 返回一个警告（数据属性“options”已被声明为prop。）并忽略传递的data（即使它只是一个警告而不是错误，我发现奇怪）

【讨论】：

如果你想让 props（来自 storybook 旋钮）动态地反映到组件的 props 中，你可以使用 computed.示例：props: { KnobTitle: { default('Title', 'Title Text') } }, computed: { componentProp() { return { ComponentTitle: this.KnobTitle }; } }, template: '<MyComponent :my-prop="componentProp">'}