vue.js - 如何在插槽中访问子组件的反应数据?
问题描述
目前,我有一个父组件,它渲染一个子组件,并且还将一个组件(模态,称为 Modal.vue)作为插槽传递给子组件。
父.vue
<ChildComponent :id='1>
<modal slot="modal" :postTitle="'test'" />
</ChildComponent>
孩子.vue
export default {
props : ['id'],
data(){
return {
modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>
模态的.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 组件,那么插槽是可行的方法......
插槽
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
上面的示例)
推荐阅读
- selenium - nightwatch.js 如何创建警告
- html - 如何在 laravel 中使用带有刀片引擎的 vue-gettext 翻译静态文本?
- javascript - 如何使用 webpack 访问 $q 库?
- javascript - JavaScript 上下箭头菜单(仅限 Javascript)
- spring-boot - Spring缓存不缓存任何东西
- angular5 - 材质复选框中的父子复选框
- r - 在 R 中添加嵌套列表
- tensorflow - Tensorboard 通过脚本提取标量
- mysql - 无论它们如何存储在数据库中,如何以小写形式返回选择查询的列?是否有任何配置更改以实现相同的效果?
- onelogin - 在我们的应用程序中从 Onelogin 帐户注销用户