Vue @click.native 不工作？

Question

我有这样的导航组件：

<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 中，它工作正常，为什么会发生这种情况？

Answer 1

1. .native 修饰符在原生元素上不是必需的 - 它只能用于组件元素。删除它。

2. 您似乎想更改根组件中的数据。您当前的代码更改了导航组件中的数据。

两种方法：

1) 干净的方式：

在导航组件中，我们向父组件发出一个带有新值的事件：

<a href="#" @click="$emit('current-view', 'youtube')">

在父（这里是根）组件中，我们接收事件并设置值：

<navigation @current-view="currentView = $event"></navigation>

2) 破解方式：

<a href="#" @click="$root.currentView='youtube'">