Vue.js Composition API：如何安全访问上层属性？

2024-03-23 12:45:31

在 Composition API 中安全访问上层属性

问题：跨层级访问数据

在 Composition API 中，我们无法直接从常规 <setup> 中访问上层 <setup> 中的数据。这会对从路径中获取信息等任务造成挑战。

解决方案：使用 `useContext()`

一种解决方案是使用 useContext() 钩子。这允许我们间接访问上层上下文。

import { defineComponent, useRoute, useContext } from 'vue';

const AppContext = createContext();

// 上层组件
export default defineComponent({
    setup() {
        return {
            previousComponentName: 'Foo',
        };
    },
});

// 下层组件
export default defineComponent({
    setup() {
        const context = useContext(AppContext);
        const route = useRoute();

        return {
            previousComponentName: context.value.previousComponentName,
        };
    },
});

替代方案：使用 `watch` 钩子

另一种方法是使用 watch 钩子监听 $route 的变化：

import { defineComponent, watch, onMounted } from 'vue';

export default defineComponent({
    setup() {
        watch(() => this.$route.path, (newPath, oldPath) => {
            // 处理路由变化
            // 访问旧路由和新路由的信息
        });

        onMounted(() => {
            // 在组件挂载时访问初始路由信息
        });
    },
});