如何在 vue.js 2 的其他组件中调用方法?

我的第一个组件是这样的:

<模板>...</模板><脚本>导出默认{...方法: {添加照片() {常量数据 = { id_product: this.idProduct}常量项 = this.idImagethis.$store.dispatch('addImage', 数据).then((响应) => {this.createImage(项目，响应)});},}}</脚本>

如果调用addPhoto方法，它会调用ajax，然后会得到响应ajax

我想将响应 ajax 和另一个参数发送到方法 createImage.方法createImage位于其他组件(第二个组件)

我的第二个组件是这样的:

<模板>
<ul class="list-inline list-photo"><li v-for="item in items"><div v-if="clicked[item]"><img :src="图像[项目]" alt=""><a href="javascript:;"class="thumb-check"><span class="fa fa-check-circle"></span></a></div><a v-else href="javascript:;"类=拇指拇指上传"title="添加照片"><span class="fa fa-plus fa-2x"></span></a></li></ul></div></模板><脚本>导出默认{...数据() {返回 {项目:[1,2,3,4,5]，clicked: [],//使用数组，因为您的项目是数字}},方法: {createImage(项目，响应){this.$set(this.clicked, item, true)},}}</脚本>

如何在第二个组件上运行 createImage 方法，然后它可以更改第二个组件中的元素?

解决方案

如果这两个组件是兄弟姐妹(没有父和子)，那么一种解决方案是使用事件总线.

一般的想法是像这样构建一个全局事件处理程序:在 main.js

window.Event = new Vue();

然后在你的第一个组件中触发一个事件:

<代码>.....then((响应) => {Event.$emit('createImage', item, response)});

并在第二个组件中注册一个处理程序，用于在 mounted() 挂钩中监听 createImage 事件:

<代码>...挂载(){Event.$on('createImage', (item, response) => {//你的代码在这里}}

您可以通过阅读 本教程 并观看 此截屏视频.

My first component like this :

<template>
    ...
</template>
<script>
    export default {
        ...
        methods: {
            addPhoto() {
                const data = { id_product: this.idProduct}
                const item = this.idImage
                this.$store.dispatch('addImage', data)
                    .then((response) => {
                        this.createImage(item, response)
                    });
            },
        } 
    }
</script>

If the method addPhoto called, it will call ajax and then it will get response ajax

I want to send response ajax and another parameter to method createImage. Method createImage is located in other component (second component)

My second component like this :

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div v-if="clicked[item]">
                    <img :src="image[item]" alt="">
                    <a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumb thumb-upload"
                   title="Add Photo">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                items: [1,2,3,4,5],
                clicked: [], // using an array because your items are numeric
            }
        },
        methods: {
            createImage(item, response) {
                this.$set(this.clicked, item, true)
            },
        }
    }
</script>

How can I run the createImage method on the second component and after that it can change the element in the second component?

解决方案

If these 2 components are siblings (no parent & child), then one solution is to use event bus.

General idea is to build a global event handler like so: in main.js

window.Event = new Vue();

Then in your first component fire an event:

....
.then((response) => {
     Event.$emit('createImage', item, response)
});

and in second component register a handler for listening to createImage event in mounted() hook:

...
mounted() {
    Event.$on('createImage', (item, response) => {
        // your code goes here
    }
}

You can find more info by reading this turtorial and watching this screen cast.