基于链接的Vue JS动态内容答案

【问题标题】：Vue JS dynamic content based on link基于链接的Vue JS动态内容
【发布时间】：2017-06-01 20:49:14
【问题描述】：

我是 Vue 的新手，我想弄清楚如何根据链接点击呈现动态内容。我收到一条错误消息：属性或方法“setLink”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

这是我的 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')" 功能的标签。也许有人知道问题出在哪里？谢谢

【问题讨论】：

您需要在您的navigation 组件中定义一个setLink 方法。即使该组件的标签在#app 中，它也没有引用主#app 组件的方法

标签： navigation vue.js vuejs2

【解决方案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'）。

【讨论】：