我想为 vue-select 添加一些故事组件使用 Storybook ,但我正在努力处理更复杂的案例,其中涉及传递 Prop 或方法。
当我在模板内传递 Prop 时它起作用:
storiesOf('VSelect', module)
.add('with labeled custom options', () => ({
components: {VSelect},
template: `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`
}))
我发现它的可读性不是很好,所以我想将它们分别作为 props 或 data 传递:
.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
都没有被 storybook 识别 - 它们似乎被忽略了。
最佳答案
我已经解决了。
.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" />`
}))
我以前的方法有两个问题:
- 传递的
数据
没有封装在函数中 - 我应该只传递
数据
。 同时使用props
和data
似乎会使 Vue 返回警告(数据属性“options”已声明为 prop。)并忽略传递的data
(尽管这只是警告而不是错误,我觉得这很奇怪)
关于javascript - 如何将 Prop 传递给组件的故事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47077972/