Vue3中根实例定义的变量在子组件内无法访问报错如何解决？

问题原因 #

你在根组件实例中定义的message属于根组件私有状态，默认不会自动传递给App.vue及其嵌套的Home.vue等子孙组件。另外你写的render函数用了箭头函数，箭头函数自身没有this绑定，无法指向根组件实例，就算手动传值也拿不到this.message，这也是隐藏问题。

修复方案 #

方案1：Props层层透传（适合少量跨组件传递的变量）

首先修改main.js的代码，修正render函数写法，把message作为props传给App组件：

import { createApp, h } from 'vue'
import App from './App.vue';

const app = createApp({
  data: () => {
    return {
      message: "Hello"
    }
  },
  // 不要用箭头函数写render，保证this指向当前组件实例
  render() {
    return h(App, {
      message: this.message
    })
  }
})
// 别忘了挂载实例
app.mount('#app')

之后在App.vue中接收props，再透传给Home组件：

<script setup>
import Home from './views/Home.vue'
// 接收父组件传的message
defineProps(['message'])
</script>

<template>
  <!-- 把message传给Home组件 -->
  <Home :message="message" />
</template>

最后在Home.vue中接收props即可正常使用：

<script setup>
defineProps(['message'])
</script>

<template>
  <div>{{ message }}</div>
</template>

方案2：全局挂载（适合全应用通用的公共变量）

如果message是很多组件都要用到的公共变量，不想层层透传，可以直接挂载到全局实例上：

import { createApp } from 'vue'
import App from './App.vue';

const app = createApp(App)
// 全局挂载变量，所有组件模板可直接访问
app.config.globalProperties.message = "Hello"
app.mount('#app')

如果要在setup语法中访问该变量，可以用getCurrentInstance获取实例：

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.message)

方案3：Pinia状态管理（适合中大型项目，全局状态较多的场景）

如果项目有大量全局状态需要维护，推荐使用Pinia做状态管理，相比全局挂载更易维护，也支持Typescript类型推导，更适合复杂项目使用。

内容的提问来源于stack exchange，提问作者TheCoder