基于链接的VUE JS动态内容

Question

我与vueand完全新手，我试图弄清楚如何基于链接单击呈现动态内容。我收到一个错误消息：属性或方法" 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'("函数。也许有人知道问题可能在哪里？谢谢

Answer 1

您的navigation组件没有一种称为setLink的方法，但是您在该组件的模板中引用了setLink方法。这就是为什么您会遇到错误。

如果您要更改主组件的currentView属性，则可以在单击链接时从navigation组件中发出事件(例如changeView(：

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

然后，在主组件的范围中收听该事件，在您的navigation组件的标签上：

<navigation v-on:changeView="setLink($event)"></navigation>

在这里，$event变量是作为changeView事件的值发送的(示例中的'someLink'(。