vue 未在实例上定义，但在渲染期间引用答案

【问题标题】：vue is not defined on the instance but referenced during rendervue 未在实例上定义，但在渲染期间引用
【发布时间】：2017-02-13 08:11:30
【问题描述】：

我正在尝试在 vue 中构建一个简单的应用程序，但遇到了错误。我的 onScroll 函数按预期运行，但是当我单击按钮组件时我的 sayHello 函数返回错误

属性或方法“sayHello”未在实例上定义，但在渲染期间引用。确保声明反应数据数据选项中的属性。（在组件中找到）

Vue.component('test-item', {
    template: '<div><button v-on:click="sayHello()">Hello</button></div>'
});

var app = new Vue({
    el: '#app',
    data: {
        header: {
            brightness: 100
        }
    },
    methods: {
        sayHello: function() {
            console.log('Hello');
        },
        onScroll: function () {
            this.header.brightness = (100 - this.$el.scrollTop / 8);
        }
    }
});

我觉得答案很明显，但我尝试过搜索，但没有找到任何答案。任何帮助将不胜感激。

谢谢。

【问题讨论】：

sayHello 不是test-item 的方法。是app的方法。
感谢@ceejayoz，做到了。我确实在这里读过：vuejs.org/guide/components.html 每个组件都包含在其自己的隔离范围内。那么，我的组件没有继承我提供给根 Vue 实例的方法吗？
明白了。非常有趣，再次感谢。我会把你的答案标记为正确的，干杯。
这需要一点时间来适应，但是当您在 Vue 中构建大型应用程序时，您会爱上它。

标签： javascript vue.js

【解决方案1】：

但是对于少数特定情况（主要是props），每个组件是完全相互隔离的。分离数据、变量、函数等。这包括它们的方法。

因此，test-item 没有 sayHello 方法。

【讨论】：

【解决方案2】：

您可以通过在 Vue 实例之后使用 .mount('#app') 而不是 el 属性来消除警告。 p>

检查下面的sn-p；

var app = new Vue({
    data: {
        header: {
            brightness: 100
        }
    },
    methods: {
        sayHello: function() {
            console.log('Hello');
        },
        onScroll: function () {
            this.header.brightness = (100 - this.$el.scrollTop / 8);
        }
    }
}).mount('#app');

请注意；以下可能不是必需的，但一直在尝试解决相同的问题：Laravel Elixir Vue 2 项目。

【讨论】：