数据未在 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 中使用提供/注入从父级注入到子级的主要内容,如果未能解决你的问题,请参考以下文章
Vue3 依赖注入------父级组件与子孙级组件之间的数据传递