Question

我创建了一个Vue实例和一个全局组件。如何从我的Vue实例中调用组件的方法？

在我的 Vue实例中，我这样做了：

methods: {
    handleTabClick: function(tab, event) {
        if (tab.name == 'log') {
            call loadLog function in log component
        }
    }
}

然后我的组件定义如下：

Vue.component('jettLog', {
    props: ['shop'],

    data() {
        return {
            log: [],
            logLoading : true
        }
    },

    methods: {
        loadLog: function() {
            console.log("Load");
        },
    },
});

如何从loadLog调用jettLog＆＃39}的函数？{/ p>

我看到不同的解释，现在我想知道最好的方法是什么？

谢谢！

Answer 1

注册一个全局事件总线whixh是一个空的vue实例，如下所示：

Var EventBus = new Vue();

你的vue实例中的

会发出一个EventVus.$emit()

的事件

methods: {
    handleTabClick: function(tab, event) {
        if (tab.name == 'log') {
            EventBus.$emit('log-event')
        }
    }
}

$emit()有两个参数： 1：事件名称 2.事件数据（可选）

在jettLog组件的创建钩子中，在EventBus上设置一个事件监听器，并在发出特定事件时执行逻辑

Vue.component('jettLog', {
    props: ['shop'],

    data() {
        return {
            log: [],
            logLoading : true
        }
    },
    created(){
        var self = this;
        EventBus.$on('log-event', function(eventData){
            self.loadLog();
        });
    },
    methods: {
        loadLog: function() {
            console.log("Load");
        },
    },
});

Check this out for more info

Vue.js - 从Vue实例调用组件的方法

1 个答案: