0

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

直接在我的组件中设置的方法有效（它会触发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 示例中，方法不是在道具中传递，而是在方法中传递！

4

0 回答 0