Question

我是Vueand的新手我试图找出如何基于链接点击呈现动态内容。我收到一条错误消息：属性或方法＆＃34; setLink＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

这是我的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 =＆＃34; setLink（＆＃39; someLink＆＃39;）＆＃34;功能。也许有人知道问题出在哪里？谢谢

Answer 1

您的navigation组件没有名为setLink的方法，但您在该组件的模板中引用了setLink方法。这就是你得到这个错误的原因。

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

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

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

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

此处，$event变量是作为changeView事件（示例中为'someLink'）的值发送的内容。

Vue JS基于链接的动态内容

1 个答案: