如何从Vue.js中的子组件访问父方法？

Question

我试图在Vue.js中的子组件上调用父/根级别方法,但我不断收到消息说TypeError: this.addStatusClass is not a function.

Vue.component('spmodal', {
    props: ['addStatusClass'],
    created: function() {
        this.getEnvironments();
    },
    methods: {
        getEnvironments: function() {
            this.addStatusClass('test');
        }
    }
});

new Vue({
    el: '#app',
    methods: {
        addStatusClass(data) {
          console.log(data);
        }
    }
});

这是一个完整的JSBIN示例:http://jsbin.com/tomorozonu/edit？js,console,output

如果我调用this.$parent.addStatusClass('test');它工作正常,但基于Vue.js文档,这是不好的做法,我应该使用不起作用的道具.

Answer 1

指定prop本身没有任何作用,你必须实际从父对象传递一些东西 - 在本例中是函数.

<spmodal :add-status-class="addStatusClass"></spmodal>