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组件是可用于组装视图的可重用部件，它们并不意味着在整个应用程序中共享javascript逻辑。如果您想这样做，最好不要编写模块并在父Vue文件中导入其功能。你的沟通方式＆＃34;与您的子组件正确配合是通过prop-bindings，它包含数据并可以重新触发子组件的render循环。通过调度事件完成从孩子到父母的沟通。你永远不想在两者之间分享逻辑。

无论如何，无论如何都可以这样做：

您必须在父模板中包含子组件的元素，否则不会安装它并且无法访问其方法：

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

然后，您可以使用其ref：

调用该组件上的任何方法

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

Answer 2

执行此操作的最佳方式是Custom Event

您可以触发从组件到 vue 实例中加载的#root元素的任何事件。

$emit('event-name')可用于触发事件!!

我希望这会有所帮助：）

如何在VUE中正确使用父级组件方法？

2 个答案: