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'">