[英]How to pass props to component's story?
我想使用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
都没有被故事书识别 - 它们似乎被忽略了。
我已经解决了。
.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
(即使它只是一个警告而不是错误,我觉得很奇怪) 您是否尝试使用VSelect组件上的选项绑定数据中的选项?
像这样:
.add('with labeled custom options as props', () => ({
components: {VSelect},
data: {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
template: `<v-select :options="options"/>`
}))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.