Javascript 未使用VueJS中的提供/注入从父级向子级注入数据

我试图使用提供和注入将数据从父元素注入到子元素，但子元素中没有数据。我在组件中添加了相同的数据（已注释），如果未注释，它是可见的，但不是注入的数据

正在打印Hello，但未打印传递的数据

TheResource.vue----父级

存储资源
添加资源
从“/StoredResources”导入StoredResources；
从“./AddResource”导入AddResource；
导出默认值{
组成部分：{
存储资源，
添加资源
},
数据（）{
返回{
已选择选项卡：“存储资源”，
储存资料来源：[
{ 
id:“官方指南”，
标题：“官方指南”，
描述：“Vue.js官方文档”，
链接：'https://vuejs.org'
},
{
id:'谷歌'，
标题：“谷歌”，
描述：“学习谷歌…”，
链接：'https://google.org'
}
]
};
}, 
提供：{
资源：this.storedResources
},
方法：{
设置选定选项卡（选项卡）{
console.log（'Clicked'）
this.selectedTab=tab；
}
}
}

StoredResource.vue--子级

你好

从“/LearningResources”导入LearningResources；
导出默认值{
注入：['resources']，
//数据（）{
//返回{
//资源：[
//             { 
//id:“官方指南”，
//标题：“官方指南”，
//描述：“Vue.js官方文档”，
//链接：'https://vuejs.org'
//             },
//             {
//id:'谷歌'，
//标题：“谷歌”，
//描述：“学习谷歌…”，
//链接：'https://google.org'
//             }
//         ]
//     };
// },
组成部分：{
学习资源
}
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
保证金：自动；
最大宽度：40雷姆；
}

来自：

要访问组件实例属性，我们需要将

provide

转换为返回对象的函数

provide（）{
返回{
资源：this.storedResources
}
}

除非

provide

是来自以下站点的一项功能，否则没有

此

访问权限：

要访问组件实例属性，我们需要将

provide

转换为返回对象的函数

provide（）{
返回{
资源：this.storedResources
}
}

除非

提供

是一项功能，否则没有

此

访问权限

<template>
    <div>
        <base-card>
            <base-button @click.native="setSelectedTab('stored-resources')">Stored Resources</base-button>
            <base-button @click.native="setSelectedTab('add-resource')">Add Resource</base-button>
        </base-card>
        <component :is="selectedTab"></component>       
    </div>

</template>
<script>
import StoredResources from './StoredResources';
import AddResource from './AddResource';
export default {
    components:{
        StoredResources,
        AddResource
    },
    data(){
        return{
            selectedTab:'stored-resources',
            storedResources: [
                { 
                    id: 'official-guide',
                    title: 'Official Guide', 
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to google.....',
                    link: 'https://google.org'
                }
            ]
        };
    }, 
    provide:{
        resources: this.storedResources
    },
    methods: {
        setSelectedTab(tab){
            console.log('Clicked')
            this.selectedTab = tab;
        }
    }
}
</script>

<template>

    <ul>
        <learning-resources v-for="res in resources" 
            :key="res.id" 
            :title="res.title" 
            :description="res.description"
            :link="res.link"></learning-resources>
        <h1>Hello</h1>
  </ul>
  
</template>
<script>
import LearningResources from './LearningResources';

export default {
   
    inject: ['resources'],
    //   data(){
    //     return{
           
    //         resources: [
    //             { 
    //                 id: 'official-guide',
    //                 title: 'Official Guide', 
    //                 description: 'The official Vue.js documentation',
    //                 link: 'https://vuejs.org'
    //             },
    //             {
    //                 id: 'google',
    //                 title: 'Google',
    //                 description: 'Learn to google.....',
    //                 link: 'https://google.org'
    //             }
    //         ]
    //     };
    // },
    components:{
        LearningResources
    }
}
</script>
<style scoped>
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        margin: auto;
        max-width: 40rem;
    }
</style>