Question

我有这样的HTML：

<div id="nav">
    <homenav v-on:navigation="switchNav(this.nav)" v-if="nav == 'homeNav'"></homenav>
    <mainav v-if="nav == 'mainNav'"></mainav>
</div>

我的Js是这样的：

Vue.component('homenav', Navigation);
Vue.component('mainav', Navigation2);

   new Vue({
    el: '#nav',
    data: {
        nav: 'homeNav'
    },
    methods: {
        switchNav: function (test) {
            console.log(test);
            console.log(this.nav);
        }
    }
});

homenav组件的一部分，用于显示我想要做的事情：

<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
        <a class="navbar-brand" href="">Website Builder</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="/#/">Create</a>
                </li>
                <li class="nav-item">
                    <a v-on:click="navData"  class="nav-link" href="/#/how">How</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/youtube">Videos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/login">Go to main site</a>
                </li>
            </ul>
    </div>
</nav>
</template>

<script>

export default {
    data() {
        return {
            nav: ''
        }
    },
    methods: {
    navData () {
        this.nav = 'mainNav';
        this.$emit('navigation');
        console.log(this.nav);
        }
    }
}

所以我在这里想要实现的是导航中的动态切换，例如，如果用户点击转到主站点链接，导航将动态地从homenav更改为mainav。但是，我不知道如何完成它，我的尝试就在上面。帮助..

编辑所以在我最近的尝试中我已经管理，以便它从子+父函数控制日志。它安慰homeNav和mainNav在一起。但是我还需要将子this.nav传递给父级，以便父级可以更新它的this.nav？因为尽管它输出两者，但导航不会改变。

Answer 1

实现这一目标的最佳方法是使用 Vue Router 。

但是，如果你想在没有路由的情况下这样做，你应该用动态组件

来做

<component is=""></component>

您可以在此处查看示例：https://jsfiddle.net/lucaskatayama/256Lo0xa/1/

有一个应用程序，可以在<component></component>内切换组件。

它通过更改所选组件来模拟您的开关。

子组件的Vue运行功能？

1 个答案: