我试图基本上在模态槽中显示一些子数据。本质上,父组件是一个页面,子组件是一个表格,插槽是一个模态。对于单击的每个表格行,都会出现一个模式,其中包含表格数据。你会如何建议这样做
也许是这样的?
<template>
<div>
<table>
<row v-for="item in items" @click="onRowClick(item)"
....show some data
</row>
</table>
<modal v-if="activeItem" :item="activeItem" @onClose="onModalClose" />
</div>
</template>
<script>
export default {
name: 'child',
props: ["items"]
data() {
return {
activeItem: null
}
},
methods: {
onRowClick(item) {
this.activeItem = item;
},
onModalClose() {
this.activeItem = null;
}
}
}
</script>
我不明白这如何具有插槽的灵活性?
好吧,它不像插槽那么灵活,但它可以完成工作:)
如果您确实需要以允许在不同位置使用它并更改其部分外观(在您的情况下为行详细信息)的方式设计您的 Child/table 组件,那么插槽是可行的方法......
插槽
Slots 是内容的分发渠道。当您在组件中放置一个插槽时,您是在说“我的父组件可以提供部分模板。当这个模板被渲染时(在父组件范围内 -很重要,因为该模板只能访问父组件的数据/方法等),我'将获取渲染结果并将其放在我自己的模板中的这个确切位置“。使用常规插槽就像将 HTML 传递到您的组件中。
我的问题是,如何在我的插槽组件中访问孩子的数据(和功能)?
您必须明确授予插槽模板访问某些子数据的权限。假设您的子组件具有 prop item
。您可以像这样在其中定义作用域插槽:
<slot name="rowExpander" :itemProp="item"></slot>
...并像这样在父级内部使用它:
<template v-slot:rowExpander="slotProps">
<MyRowExpanderComponent :item="slotProps.itemProp" />
</template>
或者使用ES2015 解构
<template v-slot:rowExpander="{ itemProp }">
<MyRowExpanderComponent :item="itemProp" />
</template>
几乎可以将任何东西传递到作用域插槽中 - 数据/道具/方法/计算,您甚至可以使用实例属性,例如$data
or $props
:
<slot name="rowExpander" :childProps="$props"></slot>
无法传递子实例本身:
<slot name="rowExpander" :child="this"></slot>
(主要是因为this
没有在模板中定义 - 我认为如果您使用渲染函数编写没有模板的组件,这是可以做到的,但这是另一回事)
重要的是要了解作用域插槽模板只是常规的 Vue 模板。它可以访问定义它的组件(父级)的所有实例属性以及对象slotProps
。当您在作用域插槽模板中使用组件时,该组件无权访问所有子数据或slotProps
自动神奇地- 您仍然需要将其显式传递给它(如我MyRowExpanderComponent
上面的示例)