如何從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中的子組件訪問父方法？

回答

相關問題