组件加载时，Vue的Provide和Inject出现未定义的情况
<p><br /></p><h2>情况</h2>
<p>我正在尝试使用 Vue 的提供和注入功能的选项 API，以便 <code>header.vue</code> 组件可以向 <code>container-nav.vue</code> 组件提供数据（请参阅组件层次结构）。但是，当注入数据时，它在初始加载时是未定义的。</p>
<p><strong>当前组件层次结构：</strong></p>
<ul>
<li>header.vue > header-nav-menu.vue > 容器-nav.vue</li>
</ul>
<h1>尝试 1 - header.vue（祖父母）</h1>
<p>在此组件中，我从 pinia (storeCommon) 获取 <code>Provide() {}</code> 内的以下字符串 <code>'/'</code>。</p>
<pre class="brush:php;toolbar:false;">import { defineComponent } from 'vue'
import parentStore from '@/store'
export default defineComponent({
setup() {
// Should not have access to this.navHome -> undefined (loads before options API)
console.log("1. Calling setup in Header")
const storeCommon = parentStore()
return { storeCommon }
},
beforeCreate() {
// Should not have access to this.navHome -> undefined (loads before options API)
console.log("2. Calling beforeCreate in Header")
},
provide() {
console.log("3. Calling provide in Header")
return {
navHome: this.storeCommon.textualData[0]?.navigation.links.home
}
},
created() {
// Should have access to this.navHome -> '/' (loads after options API)
console.log("9. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
},
mounted() {
// Should have access to this.navHome -> '/' (loads after options API)
console.log("8. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
}
})</pre>
<h1>尝试 1 - container-nav.vue（子级）</h1>
<p>在此组件中，我注入由 <code>header.vue</code> 组件提供的 <code>navHome</code>。</p>
<pre class="brush:php;toolbar:false;">import { defineComponent } from 'vue'
export default defineComponent({
inject: [ 'navHome' ],
setup() {
// Should not have access to this.navHome -> undefined (loads before options API)
console.log("4. Calling setup in Container Nav")
},
beforeCreate() {
// Should not have access to this.navHome -> undefined (loads before options API)
console.log("5. Calling beforeCreate in Container Nav")
},
created() {
// Should have access to this.navHome -> '/' (loads after options API)
console.log("6. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
},
mounted() {
// Should have access to this.navHome -> '/' (loads after options API)
console.log("7. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
}
})</pre>
<h1>尝试 1 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Calling setup in Header
2. Calling beforeCreate in Header: undefined -> Correct
3. Calling Provide in Header
4. Calling setup in Container Nav
5. Calling beforeCreate in Container Nav: undefined -> Correct
6. Calling created in Container Nav: undefined -> Incorrect (should be '/')
7. Calling mounted in Container Nav: undefined -> Incorrect (should be '/')
8. Calling mounted in Header: undefined -> Incorrect (should be '/')
9. Calling created in Header: undefined -> Incorrect (should be '/')</pre>
<hr />
<h1>尝试 2 - header.vue（祖父母）</h1>
<p>使用与之前相同的代码和选项 API，除了使用 <code>setup</code> 和 <code>provide</code>。</p>
<pre class="brush:php;toolbar:false;">import { defineComponent, provide } from 'vue'
import parentStore from '@/store'
setup() {
// 1. Tried this way
const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
const navHome = provide('navHome', navLinkHome)
// 2. Tried this way
const navHome = provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
return {
// 1 & 2
navHome
// And also this way
navHome: provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
}
}</pre>
<h1>尝试 2 - container-nav.vue（子级）</h1>
<pre class="brush:php;toolbar:false;">import { defineComponent, inject } from 'vue'
setup() {
const navHome = inject('navHome')
return {
navHome
// Tried this too, but same as above just longer
navHome: navHome
}
}</pre>
<h1>尝试 2 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Calling setup in Header
2. Calling beforeCreate in Header: undefined -> Correct
3. Calling setup in Container Nav
4. Calling beforeCreate in Container Nav: undefined -> Correct
5. Calling created in Container Nav: undefined -> Incorrect (should be '/')
6. Calling mounted in Container Nav: undefined -> Incorrect (should be '/')
7. Calling mounted in Header: undefined -> Incorrect (should be '/')
8. Calling created in Header: undefined -> Incorrect (should be '/')</pre>
<h2>混乱</h2>
<ul>
<li><p>首先，我注意到在 <code>header.vue</code> 中使用 <code>provide() {}</code> Options API 时，并尝试引用 <code>navHome</code>。我无法在创建或安装的方法中使用 <code>this.navHome</code> 。我会收到一条错误消息，说它在 <code>CreateComponentPublicInstance</code> 类型上不存在。为了解决这个问题，我改为使用 <code>this.$refs.navHome</code> - 甚至不确定这是否是正确的做法。</p>
</li>
<li><p>其次，当在 <code>container-nav.vue</code> 组件中使用 <code>inject: [ 'navHome' ]</code> 时，我无法使用 <code>this.navHome</code> 访问它。同样，我只能使用 <code>this.$refs.navHome</code> 访问它。</p>
</li>
</ul>
<p>但是。</p>
<ul>
<li>当在 <code>header.vue</code> 的设置方法中使用 Provide 并在 <code>container-nav.vue</code> 的设置方法中使用 Inject 时，我可以使用 <code>this.navHome</code> 访问 <code>navHome</code> 。不知道为什么这样做。</li>
</ul><p><br /></p>
1
786
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
parentStore().getTextualData[0]?.navigation.links.home在父级提供时具有值"/"因为它不是一个响应式对象const navLinkHome = computed(()=> parentStore().getTextualData[0]?.navigation.links.home) const navHome = provide('navHome', navLinkHome)this.$refs.navHome是错误的方式，this.navHome应该可以工作。不过，我建议您使用组合 API 样式