Vue3根组件属性无法在子组件中访问的问题求助

方法一：使用 app.config.globalProperties（推荐用于全局通用属性） #

在App.js中直接挂载全局属性，所有选项式API组件都能通过this访问，模板中可直接调用：

// App.js
require('./bootstrap');

import { createApp } from 'vue';
import router from './router'
import RootComponent from './RootComponent.vue'
 
const app = createApp(RootComponent);

// 挂载全局属性
app.config.globalProperties.$baseURL = 'www.example.com';
app.config.globalProperties.$siteTitle = '示例站点';
 
app.use(router).mount("#app");

子组件（HeaderMiddle.vue）使用示例：

<script>
export default {
  mounted() {
    console.log(this.$baseURL); // 控制台输出 www.example.com
  }
}
</script>
<template> 
<div class="container-fluid">
    <div class="row text-center align-items-center height-150">
        <div class="col-xs-12 col-sm-12 col-lg-2">
            <div class="logo">
            <a href="/" title="">
                <h1>{{ $baseURL }}</h1>
            </a>
            </div>
        </div>
    </div>
</div>
</template>

方法二：使用 provide/inject（适合响应式全局状态） #

如果需要属性具备响应式特性，可采用Vue3的依赖注入方案：

根组件修改：

<script>
import HeaderTop from './pages/partials/header_top.vue'
import HeaderMiddle from './pages/partials/header_middle.vue'
import MainNavbar from './pages/partials/main_navbar.vue'
import MainFooter from './pages/partials/footer.vue'
import { provide, ref } from 'vue';

export default {
    setup() {
        // 用ref包裹实现响应式
        const baseURL = ref('www.example.com');
        // 提供给所有子组件
        provide('baseURL', baseURL);

        return {
            show: ref(true)
        }
    },

    components: {
        HeaderTop,
        HeaderMiddle,
        MainNavbar,
        MainFooter
    }
}
</script>

子组件（HeaderMiddle.vue）使用示例：

<script>
import { inject } from 'vue';

export default {
    setup() {
        const baseURL = inject('baseURL');
        return { baseURL }
    }
}
</script>
<template> 
<div class="container-fluid">
    <div class="row text-center align-items-center height-150">
        <div class="col-xs-12 col-sm-12 col-lg-2">
            <div class="logo">
            <a href="/" title="">
                <h1>{{ baseURL }}</h1>
            </a>
            </div>
        </div>
    </div>
</div>
</template>

方法三：独立配置文件（适合静态常量） #

创建单独的配置文件集中管理静态属性，比如src/config.js：

// config.js
export const BASE_URL = 'www.example.com';
export const SITE_TITLE = '示例站点';

组件中导入使用示例：

<script>
import { BASE_URL } from '../config.js';

export default {
    data() {
        return {
            baseURL: BASE_URL
        }
    }
}
</script>
<template> 
<div class="container-fluid">
    <div class="row text-center align-items-center height-150">
        <div class="col-xs-12 col-sm-12 col-lg-2">
            <div class="logo">
            <a href="/" title="">
                <h1>{{ baseURL }}</h1>
            </a>
            </div>
        </div>
    </div>
</div>
</template>

你之前的问题原因 #

直接导入RootComponent.vue得到的是组件的选项定义对象，并非实例化后的组件实例。data是一个函数，只有组件被实例化后才会执行并返回数据对象，所以直接访问app.baseURL无法获取到目标值。

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