Vuejs2 Vuejs 2.1.10方法作为prop而不是函数传递

一般来说，我对Vuejs和JS框架非常陌生，所以请耐心听我说。我试图通过将其作为道具传递，从子组件（2层深）调用驻留在根组件中的方法，但我得到了错误：

Uncaught TypeError: this.onChange is not a function
at VueComponent._onChange (category.js:8)
at boundFn (vendor.js?okqp5g:361)
at HTMLInputElement.invoker (vendor.js?okqp5g:2179)

通过将道具指定给子组件内的方法，我不确定我是否在正确的轨道上，但请看您的想法：

index.js

var app = new Vue({

    el: '#app',
    data: function () {
        return {
            categories: [],
            articles: []
        }

    },

    methods: {
        onChange: function () {

            console.log('first one');

            return function () {
                console.log('second one');
            }

        }

    },
});

html：

<div id="app">
    <sidebar :onChange=onChange :categories=categories></sidebar>
    <varticles :articles=articles></varticles>
</div>

sidebar.js：

Vue.component('sidebar', {

    props: ['onChange', 'categories'],


    methods: {
        _onChange: function () {
            this.onChange();
        }
    },


    template: `
        <div class="sidebar">

        <category v-for="item in categories" :onChange="_onChange" v-bind:category="item"></category>

    </div>
    `
});

Vue.component（'sidebar'{
道具：['onChange'，'categories'，]，
方法：{
_onChange:function（）{
this.onChange（）；
}
},
模板：`
`
});

category.js：

Vue.component('category', {

    props: ['category', 'onChange'],


    methods: {
        _onChange: function () {
            this.onChange();
        }
    },


    template: `
        <div class="category">
            <h2>{{ category.name }}</h2>

            <ul>
                <li v-for="option in category.options">
                <input v-on:change="_onChange" v-bind:id="option.tid" type="checkbox" v-model="option.checked">
                 <label v-bind:for="option.tid">{{ option.name }}</label>
                 </li>
            </ul>

        </div>
    `
});

Vue.component（'category'{
道具：['category'，'onChange'，]，
方法：{
_onChange:function（）{
this.onChange（）；
}
},
模板：`
{{category.name}


{{option.name}


`
});

---

必须有更简单的方法来做到这一点

我建议你看看这个。您的代码的简化版本就在这里

在模板中编写道具时，声明它们不带大写字母。 在

props

中声明为

onChange

的prop相当于html中的

onChange

<sidebar :on-change=onChange :categories=categories></sidebar>

---

此外，如果您希望在超过1级的组件之间建立链接，我建议您查看事件和非父子通信

轰，就是这样！