Navigation 基于链接的Vue JS动态内容

我完全是Vuean的新手，我正在尝试找出如何基于链接单击呈现动态内容。我收到一条错误消息：属性或方法“setLink”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明被动数据属性。

以下是我的VUE代码：

Vue.component('navigation', {
            template: '#navigation'
        })

        Vue.component('home', {
            template: '#home'
        })

        Vue.component('about', {
            template: '#about'
        })

        var app = new Vue({
            el: '#app',

            component: {
                navigation
            },


            data: {
                currentView: 'home'
            },

            methods: {
                setLink: function(link) {
                    this.currentView = link;
                }
            }
        })

我有一个id为app的div：

<div id="app">
        <navigation></navigation>
        <div class="container">
            <componet :is="currentView"></component>    
        </div>
    </div>

---

在导航中，我有一个带有v-on:click=“setLink（'someLink'）”函数的标签。也许有人知道问题在哪里？谢谢

您的

导航

组件没有名为

setLink

的方法，但您正在该组件的模板中引用

setLink

方法。这就是为什么你会犯这样的错误

如果您试图更改主组件的

currentView

属性，则可以在单击链接时从

导航组件发出事件（例如
changeView
）：

<div v-on:click="$emit('changeView', 'someLink')"></div>

在这里，
$event
变量是作为
changeView
事件的值发送的（
'someLink'
。
您需要在
导航组件中定义
setLink
方法。即使该组件的标记在#app中，它也没有对主#app组件的方法的引用
<navigation v-on:changeView="setLink($event)"></navigation>