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)hacky方式:

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