【问题标题】:Vue.js Call method from another componentVue.js 从另一个组件调用方法
【发布时间】:2025-12-12 17:30:01
【问题描述】:

我有 2 个组件。如何在createProject() 方法中调用fetchProjectList() 方法。

第一部分:

Vue.component('projects', {
    template: '#projects-template',

    data: function () {
        return {
            list: []
        }
    },

    ready: function () {
        this.fetchProjectList();
    },

    methods: {
        fetchProjectList: function () {
            resource.get().then(function (projects) {
                this.list = projects.data;
            }.bind(this));
        }
    }

});

第二部分

Vue.component('createProjects', {
    template: '#create-projects-template',

    methods: {
        createProject: function () {
            resource.save({}, {name: this.name}).then(function () {
                this.fetchProjectList()
            }.bind(this), function (response) {
                // error callback
            });
        }
    }
});

【问题讨论】:

  • 这些组件是如何链接的?他们有共同的父母吗?
  • 不,他们没有共同的父母。我是初学者。

标签: javascript vue.js vue-resource


【解决方案1】:

你没有,或者说你不应该。组件不应该以这种直接的方式依赖于其他组件。

您应该将此方法提取到mixin 中,或者将其保存在您导入到每个组件中的自己的对象中。

阅读商店模式:http://vuejs.org/guide/application.html#State_Management

【讨论】:

  • 根据他们的关系,使用事件也可能是一个很好的解决方案。