Question

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

<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

我想将响应ajax和另一个参数发送到方法createImage。方法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方法，之后它可以更改第二个组件中的元素？

Answer 1

如果这两个组件是兄弟姐妹（没有父母和孩子），那么一种解决方案就是使用事件总线。

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

window.Event = new Vue();

然后在你的第一个组件中发起一个事件：

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

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

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

您可以通过阅读this turtorial并观看this screen cast来找到更多信息。

Answer 2

没有两个组件没有父/子关系。它们都通过root vue实例连接。要访问根vue实例，只需调用this.$root即可获得根实例。

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

并在第二个组件中创建需要触发的功能

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

它更像是一个插座。

N.B。将vue实例添加到全局窗口对象是一种不好的做法

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

2 个答案: