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

<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>

如果调用addPhoto方法,它将调用ajax,然后将得到响应ajax

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

我的第二部分是这样的:

<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>

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

推荐答案

如果这两个组件是同级(没有父组件和子组件),那么一个解决方案就是使用事件总线.

总体思路是构建一个全局事件处理程序,如下所示:

window.Event = new Vue();

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

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

在第二个组件中,注册一个处理程序,用于监听mounted() hook中的createImage个事件:

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

通过阅读this turtorial和观看this screen cast,你可以找到更多信息.

Vue.js相关问答推荐

v-model 修饰符返回空

如果似乎没有明确使用输入事件,那么发出输入事件有什么作用?

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

仅在构建时为 Vue3 和 TailwindCSS 添加前缀

Vue Js Composition Api 未定义(读取名称)

如何在 vue js 的一页路由下显示不同的 category._id

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

Vue.js 和观察者模式

是否可以让 html-webpack-plugin 从 css 生成