如何解决如何将道具传递到插槽中的组件?
我正在开发一个在后端使用pimcore和twig的Vue应用程序。我必须创建一个用于接收插槽的组件(另一个组件),并将其渲染到内部,但要带有动态道具。
这是 viani.twig.html 的根:
<div>
<viani-accordion>
<viani-filter-checkbox v-slot="{filterRows}"></viani-filter-checkbox>
</viani-accordion>
</div>
没有什么特别的。 viani-accordion
是父级组件,viani-filter-checkbox
是slot
,我必须使用适当的道具进行渲染。
在这里您可以看到 VianiAccordion.vue :
<template>
<div class="wrapper">
<AccordionTitle v-for="(item,index) in dataToRender" :item="item" :key="index">
/*I think this is incorrect,but I'm trying to prop data that I need in viani-filter-checkbox*/
<slot :filter-rows="item.items"></slot>
</AccordionTitle>
</div>
</template>
<script>
import AccordionTitle from './Accordion-Title';
export default {
name: "Viani-Accordion",components: {AccordionTitle},data() {
return {
dataToRender: [
{
name: 'first item',items: [
{
name: 'oil olive',quantity: 10,},{
name: 'subitem 2',quantity: 11,]
},{
name: 'second item',items: [
{
name: 'subitem 1',]
}
]
}
},}
</script>
然后,我还有一个更深的子组件 Accordion-Title.vue ,该子组件负责渲染插槽(因此我必须将插槽传递给多个组件):
<template>
<div v-if="isOpen" class="child-wrapper">
/*I think this is incorrect,but I'm trying to prop data that I need in viani-filter-checkbox*/
<slot :filterRows="item.items"></slot>
</div>
</template>
<script>
export default {
name: "Accordion-Title",props: {
item: {
type: Object,default: null
}
}
}
</script>
,最后是 Viani-FiltersCheckbox.vue :
<template>
<div>
//child component which we don't need in this case
<FilterCheckboxRow v-for="(item,index) in filterRows" :item="item" :key="index"/>
</div>
</template>
<script>
import FilterCheckboxRow from './FilterCheckboxRow'
export default {
name: "VianiFilterCheckbox",components: {
FilterCheckboxRow
},props: {
//here I expect to get array to render,but got default value (empty array)
filterRows: {
type: Array,default: function () {
return []
}
},}
</script>
因此,我需要将道具(filterRows
)传递到呈现为插槽的组件(Viani-FiltersCheckbox.vue
)。我已经读过this和this,但仍然不明白错误所在以及如何获得所需的道具。
解决方法
您似乎正在尝试通过props.XXX
访问道具。通常仅在functional components的模板中完成此操作。否则,将在没有props.
前缀的情况下访问道具(即props.item.items
应该为item.items
)。
然后将filterRows
从合并范围数据传递到子组件,声明一个<template>
,然后将您的孩子移动到该子组件中,并在那里绑定filterRows
:
<viani-accordion>
<!-- BEFORE: -->
<!-- <viani-filter-checkbox v-slot="{filterRows}"></viani-filter-checkbox> -->
<template v-slot="{filterRows}">
<viani-filter-checkbox :filterRows="filterRows"></viani-filter-checkbox>
</template>
</viani-accordion>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。