javascript - 如何在VUE中正确使用父组件中的子组件方法？

Question

我有 ImageUpload.vue 组件，它是简单的 Bootstrap 模式，具有很少的方法。

我想知道使用这些方法之一的最佳方式是什么？像这样的事情:

const app = new Vue({
    components: {
        'component-image-upload': require('./components/ImageUpload.vue'),
    },
    el: '#app',
    data() {
        return {
            images: [],
            pagination: {
                previous: null,
                next: null
            }
        }
    },
    methods: {
        createImage: function(page) {
            this['component-image-upload'].load(image)
        }
    }
});

这个想法只是重用该模型来编辑现有图像数据。

Answer 1

当您发现自己从另一个(子)组件调用方法时，您应该重新考虑您的架构。 Vue 组件是可重用的部件，可用于组装 View ，它们并不意味着在您的应用程序中共享 javascript 逻辑。如果你想这样做，最好编写一个模块并将其函数导入到父 Vue 文件中。与子组件正确“通信”的方式是通过 Prop 绑定(bind)，它包含数据并且可以重新触发子组件的渲染循环。从子级到父级的通信是通过分派(dispatch)事件来完成的。你永远不想在两者之间共享逻辑。

无论如何，您都可以这样做:

您的子组件的元素必须位于父组件的模板中，否则它不会被挂载并且无法访问其方法:

<component-image-upload ref="image" />

然后您可以使用其引用来调用该组件上的任何方法:

createImage (page) {
  this.$refs.image.myMethod('this is how you call it from parent')
}