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

我想在Vue.js的子组件上调用父级/根级别的方法，但我总是收到一条消息，说TypeError: this.addStatusClass is not a function。如何从Vue.js中的子组件访问父方法？

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文档上，这是不好的做法，我应该使用哪个工作不道具。

来源

2016-04-30 ATLChris

指定道具本身不做任何事情，你必须从父项中实际传递一些东西 - 在本例中是函数。

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

来源

2016-04-30 12:29:22

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

回答

相关问题