我有这样的导航组件：
<template>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Website Builder</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="#" @click.native="currentView='create'">Create</a>
</li>
<li>
<a href="#" @click.native="currentView='how'">How</a>
</li>
<li>
<a href="#" @click.native="currentView='about'">About</a>
</li>
<li>
<a href="#" @click.native="currentView='youtube'">Videos</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
和我的js：
Vue.component('navigation', Navigation)
Vue.component('create', Create)
Vue.component('how', How)
Vue.component('about', About)
Vue.component('youtube', Youtube)
new Vue({
el: '#app',
data: {
currentView: 'create'
}
和 HTML：
<div id="app">
<navigation></navigation>
<keep-alive>
<transition name="slide-fade" mode="out-in">
<component :is="currentView"></component>
</transition>
</keep-alive>
</div>
但是，当我单击导航时，它不会改变，因此我假设它无法正常工作。如果我将导航远离组件并将其粘贴在 div id=app 中，它工作正常，为什么会发生这种情况？
The .native修饰符在本机元素上不是必需的 - 它只能在组件元素上使用。去掉它。
看来您想更改根组件中的数据。您当前的代码更改了导航组件中的数据。
有两种方法可以做到这一点：
1）清洁方式：
在导航组件中，我们向父级发出一个具有新值的事件：
<a href="#" @click="$emit('current-view', 'youtube')">
在父（此处为根）组件中，我们接收事件并设置值：
<navigation @current-view="currentView = $event"></navigation>
2）黑客方式：
<a href="#" @click="$root.currentView='youtube'">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
