javascript - vue 未在实例上定义，但在渲染期间被引用

Question

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

Property or method "sayHello" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

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 方法。