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

【问题标题】：How can I access a parent method from child component in Vue.js?如何从 Vue.js 中的子组件访问父方法？
【发布时间】：2016-04-30 12:16:01
【问题描述】：

我试图在 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 文档，这是不好的做法，我应该使用不起作用的 props。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：