javascript - Vue:在有槽的子组件中访问父组件数据?
问题描述
我有两个组件 rad-list 和 rad-card,我在 rad-list 中放置了一个 slot 元素,我将在其中放置 rad-card,现在 rad-card 需要访问来自父 rad-list 组件的 computedResults 数据,我该如何访问它使用vue插槽,有可能吗?
辐射列表
<template>
<div class="RADlist_maincontainer">
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
<div class="RADlist_wrapper">
<!--rad-card, or any other component which will use computedResults GOES HERE-->
<slot></slot>
</div>
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
</div>
</template>
这是它在我的模板中的样子:
<rad-list model="Discount" module="Discount" results="discounts">
<rad-card :item="result" v-for="result in computedResults" :key="result.id" :model="module"></rad-card>
</rad-list>
如果需要,我的完整 RADlist 组件只是:
<template>
<div class="RADlist_maincontainer">
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
<div class="RADlist_wrapper">
<!--rad-card, or any other component which will use computedResults GOES HERE-->
<slot></slot>
</div>
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
export default{
name: 'RADlist',
computed:
{
computedResults: function()
{
return this.$store.state[this.module][this.results];
},
pagination: function()
{
return this.$store.state[this.module].pagination;
},
...mapState('Loader', ['loader'])
},
props:
{
component: { default:'rad-card', type:String },
module: { default:'Post', type:String },
action: { default:'list', type:String },
results: { default:'posts', type:String },
page: { default:1, type:Number },
paginate: { default:6, type:Number },
},
mounted()
{
console.log(this.$options.name+' component successfully mounted');
this.$store.dispatch(this.module+'/'+this.action, { page: this.page, paginate: this.paginate, loaderId:2473});
},
}
</script>
解决方案
推荐阅读
- java - 为什么尝试获取 Clip 会引发异常?
- java - 如何从 Handler 更改 Activity?
- go - 我如何知道拉取了哪个版本的依赖项?
- vb.net - 从 AnyCPU 更改为 x86 会导致 System.BadImageFormatException 错误
- java - 我可以只使用色板面板吗
- javascript - JavaScript 是否优化了多个纯过滤器/地图/等?
- html - 如何将文本和未排序列表放在同一行
- python - kdims 如何为 geoviews 中的多边形工作?
- java - 如何更改 Recyclerview 所选项目的背景
- c++ - 动态分配内存