使用Vue从其他组件中注入组件中的内容

Question

我有通常的管理控制台（Core-UI），我正在根据自己的需要对其进行修改。 我在Monitor页面上有一个“ MonitorAside.vue ”组件，想将MonitorAside.vue加载到其中（我正在使用vue-router ）

这是一个小数目。

src/containers/Full.vue导入所有主要组件（包括src/containers/Full.vue ），然后使用router-view来基于路由呈现视图。

src/components/Aside.vue是有问题的组件。 它包含固定内容，但是我希望如果其他组件需要这样做，则可以动态更改其内容。

src/views/Monitor.vue是有问题的页面，因此是动态需要注入/交换aside组件内容的页面。 请注意，此组件未导入Full.vue而是通过那里的路由器呈现的。

src/views/asides/MonitorAside.vue是我想在“ Monitor页面上加载到Aside.vue的组件。

我将如何去做呢？

Answer 1

因此，每当vue-router导航到另一个页面时，您是否希望更改Aside组件的内容？ 您可以查看$route值，然后根据您的路线名称呈现内容，例如：

<template>
<div>
    <monitor-aside v-if="page === 'monitor'"></monitor-aside>
    <div v-else>
        <!-- your default aside content -->
    </div>
</div>
</template>

<script>
import MonitorAside from '../views/asides/MonitorAside.vue'
export default {
    data() {
        return {
            page: null
        }
    },
    methods: {
        setContent(routeName) {
            if (routeName === 'Monitor') {
                this.page = 'monitor';
            } else {
                this.page = null;
            }
        }
    },
    created() {
        this.setContent(this.$route.name);
    },
    watch: {
        '$route'(to, from) {
            this.setContent(to.name);
        }
    }
    components: {
        MonitorAside
    }
}
</script>