Question

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

直接在我的组件中设置的方法有效（它触发alert('default')）：

<template>
    <v-select :on-change="onchangecallback"
              :multiple="multiple"
              v-model="selected" :options="options"></v-select>
</template>

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        props: {
            options: {
                default: function() { return ['one', 'two'] },
                type: Array
            },
            multiple: {
                default: false,
                type: Boolean
            },
            onchangecallback: {
                default: () => {alert('default')},
                type: Function
            }
        },
        data() {
            return {
                selected: null
            }
        }
    }
</script>

但我想在一个特定的故事中覆盖onchangecallback函数（触发alert('custom')），因此我添加到play/index.js：

storiesOf('VSelect', module)
.add('onchangeCallback', () => ({
        components: {VSelect},
        template:   `<v-select />`,
        methods:    {
            onchangecallback: function() {
                // not sure if I need a function returning a function, so I use both
                alert('custom'); // never fired

                return function() {
                    alert('custom'); // never fired
                };
            }
        }
    }))

但我最终仍然使用alert('default')代替alert('custom')，因此onchangecallback不会被覆盖。

此时我甚至不知道我是否正确地传递了这种方法，它的设计方式是如此反直觉。即在我的组件（第一个代码片段）中，我在道具中导出onchangecallback（并且它可以工作），但在Storybook example方法中，不是在道具中传递，而是在方法中传递！

如何将功能传递给组件的故事？

0 个答案: