vue未在实例上定义,但在呈现期间引用

Question

我正在尝试在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);
        }
    }
});

我觉得答案很明显,但我已经尝试过搜索,但没有提出任何问题.任何帮助,将不胜感激.

谢谢.

Answer 1

但是对于一些特定情况(主要props),每个组件彼此完全隔离.单独的数据,变量,函数等.这包括他们的方法.

因此,test-item没有sayHello方法.