数据未在 VueJS 中使用提供/注入从父级注入到子级

Posted

技术标签:

【中文标题】数据未在 VueJS 中使用提供/注入从父级注入到子级【英文标题】:Data not injected from parent to child using provide/inject in VueJS 【发布时间】:2021-03-15 10:31:30 【问题描述】:

我正在尝试使用提供和注入将数据从父元素注入到子元素,但子元素中的数据不可用。我在组件中添加了相同的数据(已注释),如果未注释它是可见的,但不是注入的数据。

Hello 正在打印,但不是传递的数据

TheResource.vue ---- 父级

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

StoredResource.vue --- 孩子

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

【问题讨论】:

【参考方案1】:

来自Vue 3 docs:

要访问组件实例属性,我们需要将provide转换为返回对象的函数

provide() 
  return 
    resources: this.storedResources
  

除非provide 是一个函数,否则没有this 访问权限

【讨论】:

以上是关于数据未在 VueJS 中使用提供/注入从父级注入到子级的主要内容,如果未能解决你的问题,请参考以下文章

如何从父级更新 vuejs 组件

Vue3 依赖注入------父级组件与子孙级组件之间的数据传递

在VueJS 2中通过v-for中的道具将数据从父级传递给子级

VueJS 2.0 从父级到子级的通信

是否可以将服务从父组件注入到组件中?

vuejs 从子组件更新父数据