调用另一个组件的方法

【问题标题】：Call a method of another component调用另一个组件的方法
【发布时间】：2025-12-16 23:40:02
【问题描述】：

如何调用另一个组件的方法？

就像我有一个名为 Modal.vue 的组件。我有一个类似下面的方法

<script>
    export default {
        name: 'modal'
        methods: {
            getUsers() {
                //some code here
            }
        },
        created: function () {
            this.getUsers();
        }
    }
</script>

我想在另一个名为 Dashboard.vue 的组件中调用该方法。

<script>
    export default {
        name: 'dashboard'
        methods: {
            add_adddress () { 
                this.getUsers();  // I would like to access here like this
                //some code here
            }
        },
    }
</script>

我阅读了this 的问题，但是如何在当前设置中使用$emit,$on,$broadcast？

【问题讨论】：

Call a Vue JS component method from outside the component的可能重复
为了使用emit，组件需要相互调用，例如仪表板组件使用模态组件，然后您从模态发出到仪表板。如果组件是分开的，我建议您创建一个 mixin，您可以将其导入任何组件并使其所有方法都可用。

标签： vuejs2

【解决方案1】：

为了使用emit，其中一个组件需要调用另一个（父级和子级）。然后你emit从子组件到父组件。例如，如果 Dashboard 组件使用 Modal 组件，您可以 emit 从 Modal 到 Dashboad。

如果您的组件彼此分开，您可以使用 Mixins。您可以创建一个 mixin UsersMixin.js，如下所示：

export default {
    methods: {
        getUsers: function () {
            // Put your code here for a common method
        }
    }
}

然后在你的两个组件中导入 mixin，你就可以使用它的方法了：

Modal.vue

<script>
import UsersMixin from './UsersMixin';
export default {
    name: 'modal'
    mixins: [
        UsersMixin
    ],
    created: function () {
        this.getUsers();
    }
}
</script>

Dashboard.vue

<script>
import UsersMixin from './UsersMixin';
export default {
    name: 'dashboard',
    mixins: [
        UsersMixin
    ],
    methods: {
        add_adddress () { 
            this.getUsers();  // I would like to access here like this
            //some code here
        }
    },
}
</script>

【讨论】：