当前，我有一个父组件，该组件呈现一个子组件，并且还将一个组件（称为Modal.vue的模式）作为插槽传递给子组件。
父视图
<ChildComponent :id='1>
<modal slot="modal" :postTitle="'test'" />
</ChildComponent>
小孩
export default {
props : ['id'],
data(){
return {
modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>
模态
<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传递到组件中一样。
我的问题是，如何在插槽组件中访问孩子的数据（和功能）？
您必须明确授予插槽模板访问某些子数据的权限。假设您的子组件具有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或$props：
<slot name="rowExpander" :childProps="$props"></slot>
这是不可能通过子实例本身：
<slot name="rowExpander" :child="this"></slot>
（主要是因为this未在模板内部定义-我认为如果使用render函数编写不带模板的组件，则可以完成此操作）
重要的是要了解作用域插槽模板只是常规的Vue模板。它可以访问在那里所定义的组分（亲本）的所有实例属性和附加到一个slotProps对象。当您在作用域插槽模板中使用组件时，该组件无权访问所有子数据，也无法slotProps 自动访问-仍然需要显式地将其传递给它（如MyRowExpanderComponent上述示例所示）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句