目前，我有一个父组件，它渲染一个子组件，并将一个组件(一个模态，称为Modal.vue(作为插槽传递到子组件中。
Parent.vue
<ChildComponent :id='1>
<modal slot="modal" :postTitle="'test'" />
</ChildComponent>
Child.vue
export default {
props : ['id'],
data(){
return {
modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>
Modal.vue
<script>
export default {
name: "model",
props: ["postTitle"],
data() {
return {
heading: "test"
};
},
mounted() {
console.log("mounted modal slot");
console.log(this.postTitle);
console.log(this.modalHeading);
};
</script>
<template>
<div>
<h2>{{ modalHeading }}</h2>
<h3>This will be the modal slot</h3>
<p>{{ postTitle }}</p>
</div>
</template>
我的问题是，如何在插槽组件中访问子项的数据(和功能(？
我一直在尝试让它与作用域插槽一起使用，但似乎无法破解语法。
我正在尝试基本上显示模态插槽中的一些子数据。本质上，父组件是一个页面，子组件是一个表，插槽是一个模态。对于单击的每个表行，将显示一个模式，其中包含表数据。你建议怎么做
也许像这样？
<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 组件，那么插槽是可行的......
插槽
插槽是内容的分发渠道。当您在组件中放置插槽时，您会说"我的父组件可以提供部分模板。当这个模板被渲染时(在父级的组件范围内 -很重要，因为该模板只能访问父级的数据/方法等(，我将把渲染的结果放在我自己的模板中的这个确切位置"。使用常规插槽就像将 HTML 传递到组件中一样。
我的问题是，如何在插槽组件中访问子项的数据(和功能(？
您必须明确授予槽模板对某些子数据的访问权限。假设您的子组件具有道具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/props/method/computed，您甚至可以使用实例属性，如$data或$props：
<slot name="rowExpander" :childProps="$props"></slot>
无法传递子实例本身：
<slot name="rowExpander" :child="this"></slot>
(主要是因为模板中没有定义this- 我认为如果您使用渲染函数在没有模板的情况下编写组件，这是可以做到的，但那是另一回事(
重要的是要了解作用域槽模板只是常规的 Vue 模板。它有权访问定义它的组件(父级(的所有实例属性，此外还可以访问slotProps对象。当您在作用域槽模板中使用组件时，该组件无法访问所有子数据或神奇地自动slotProps- 您仍然需要将其显式传递给它(如我上面的MyRowExpanderComponent示例(