代码之家 › 专栏 › 技术社区 › Nick

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

vue.js javascript

0

Nick · 技术社区 · 8 年前

MonitorAside.vue 每当我在 Monitor 页面(我正在使用 vue-router )

src/containers/Full.vue 导入所有主要组件(包括备用组件),然后使用 router-view 基于路线渲染视图。

src/components/Aside.vue 是有问题的组件。它包含固定内容,但我希望在其他组件需要时动态更改其内容。

src/views/Monitor.vue aside 组成部分 请注意,此组件不是在中导入的 Full.vue

src/views/asides/MonitorAside.vue 是我要加载到的组件 Aside.vue 班长 页

我该怎么做?

1 回复 | 直到 8 年前

1

Florian Haider 8 年前

因此,每当vue路由器导航到不同的页面时,您都需要 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>