Question

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

就像我有一个名为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？

Answer 1

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

如果您的组件彼此分开，您可以使用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>

调用另一个组件的方法

1 个答案: