在动态加载的组件中获取自我答案

【问题标题】：Get self in dynamically loaded component在动态加载的组件中获取自我
【发布时间】：2020-08-24 08:42:57
【问题描述】：

我跟着 https://medium.com/@rmmmsy/creating-a-sidebar-with-dynamic-content-using-vue-and-vuex-88e904894e00 创建了一个基于 vuex 的侧边栏切换。

嗯 - 我想在我的侧边栏中实现一个“关闭”按钮。实际上我无法在这个侧边栏组件中访问this.component。

所以目前我这样做是一种肮脏的解决方法：

这是我的布局文件：

<template>
    <div class="min-h-screen">
        <div>
            <header>
                <Navbar/>
            </header>
            <main>
                <SlideOvers />
                <router-view/>
            </main>
            <footer>
                <div id="footer">
                    <div>
                        <Footerbar/>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</template>

<script>
import Footerbar from '../components/Navigation/Footerbar/Footerbar';
import Navbar from '../components/Navigation/Navbar/Navbar';
import SlideOvers from "./SlideOvers";

export default {
    name: 'Layout-1',
    components: {SlideOvers, Footerbar, Navbar},
    },
};
</script>

这是SliveOvers-组件：

<template>
    <component :is="component" :component="component" v-if="open"/>
</template>
<script>

export default {
    name: 'SlideOvers',
    components: {},
    watch: {
        '$route' () {
            this.$store.dispatch ('closeSidebar', this.component)
        },
    },
    computed: {
        open () {
            return this.$store.state.slideovers.sidebarOpen
        },
        component () {
            return this.$store.state.slideovers.sidebarComponent
        }
    },
}
</script>

这是触发滑动的一个按钮：

<template>
    <div>
        <button @click="handleClick"
                class="btn">
         Open user menu
        </button>
    </div>
</template>

<script>
import UserSlideover from "../../Slideovers/User/UserSlideover";

export default {
    name: "UserMenuButton",
    data () {
        return {
            component: UserSlideover,
        }
    },
    computed: {
        computedOpen () {
            return this.$store.state.slideovers.sidebarOpen && this.$store.state.slideovers.sidebarComponent === this.component
        }
    },
    methods: {
        handleClick () {
            this.$store.dispatch ('toggleSidebar', this.component)
        }
    }
};
</script>

在侧边栏中：

props: {
        component: {
            type: Object
        },
    },
    computed: {
        computedOpen () {
            console.log (this.component);
            return this.$store.state.slideovers.sidebarOpen && this.$store.state.slideovers.sidebarComponent === this.component
        }
    },
    methods: {
        handleClick () {
            this.$store.dispatch ('toggleSidebar', this.component)
        }
    }

我认为这不是我想出的最佳解决方案。

这里有人有更好的主意吗？

【问题讨论】：

我有点困惑。 :is="component 行显示组件是正在渲染的组件？请您发布完整的布局文件，以便您获得更好的帮助。
请告诉我sidebar 组件的来源？我在代码中看不到它。它是slideovers 组件的一部分吗？为什么需要将组件分派到商店？请给我看看 Vuex 商店好吗？
侧边栏组件在这种情况下是UserSlideover 组件。
除了我的回答之外，您似乎是 this.$store.state.slideovers.sidebarComponent 作为组件的道具。为什么不能在整个应用程序中使用this.$store.state.slideovers.sidebarComponent，因为存储状态是全局的？

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

真的，我认为您的解决方案没有任何问题。但是，如果您正在寻找将 component 作为道具传递的替代方法，您可以将计算属性 component 设为全局

main.vue

const app = new Vue({
    router,
    data: {
        ...
    },
    computed: {
      component() {
        return this.$store.state.slideovers.sidebarComponent
      }
    },
    store,
    render: h => h(App),
}).$mount('#app');

您现在可以使用 this.$root 在您的组件中访问它

sidebar.vue

computed: {
  computedOpen () {
      console.log (this.component);
      return this.$store.state.slideovers.sidebarOpen && this.$store.state.slideovers.sidebarComponent === this.$root.component // use this.$root.component to access the computed property in the root instance
  }
},
methods: {
    handleClick () {
        this.$store.dispatch ('toggleSidebar', this.$root.component)
    }
}

如您所见，这不是最优雅的解决方案。你可以决定你喜欢哪种方法。

【讨论】：