Question

我有两个组件rad-list和rad-card，我在rad-list中放置了一个slot元素，我将在其中放置rad-card，现在rad-card接收了calculateResults数组中的一个对象（在父作用域中）并遍历它们并将结果传递给rad-card中的道具prop，但是由于calculatedResults是在父组件中定义的，因此我的rad-card实例无法访问它？

<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>

我收到以下错误：

[Vue warn]: Property or method "computedResults" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

我的rad-list组件：

<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>

Answer 1

我认为是否可以将数据发送给子对象并不重要，但是在子对象中，您必须首先在组件中分配道具，如果这样做，则必须检查“ computedResults”的输出就像您想要的方式一样。

无法从插槽子组件中的父项访问数据属性

1 个答案: