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

Question

I am trying to call a parent/root level method on a child component in Vue.js, but I keep getting a message saying 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);
        }
    }
});

Here is a full JSBIN example: http://jsbin.com/tomorozonu/edit?js,console,output

If I call this.$parent.addStatusClass('test'); it works fine, but based on the Vue.js documentation, this is bad practice and I should be using props which is not working.

Answer 1

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

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