Question

我对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)

我不确定我是否通过将prop添加到子组件内的方法，但是看看你的想法：

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>
    `
});

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>
    `
});

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

Answer 1

我建议你看看https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case。您的代码的简化版本就在这个小提琴https://jsfiddle.net/z11fe07p/641/

中

在模板中编写道具时，声明它们没有大写字母。在您的onChange中声明为props的道具等同于您的html中的on-change。

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

如果您想要超过1级深度的组件之间的链接，我建议您查看事件和非父子通信。 https://vuejs.org/v2/guide/components.html?#Non-Parent-Child-Communication

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

1 个答案: