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

Posted 2023-02-22

【中文标题】如何在 vue.js 2 的其他组件中调用方法？

【英文标题】：How can I call method in other component on vue.js 2?

【发布时间】：2017-12-19 05:15:26

【问题描述】：

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

<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]" >
                    <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 方法，然后它可以更改第二个组件中的元素？

【问题讨论】：

这可能吗？如果不是，是否有其他方案可以在执行 addPhoto 方法时改变第二个组件中的元素？

第一个组件和第二个组件是什么关系？他们是亲子还是兄弟姐妹？通常，您会 $emit 来自子级的事件并在父级中为该事件注册一个处理程序，否则您可以使用 ref 获取对组件的引用并使用它直接调用该方法。

【参考方案1】：

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

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

并在第二个组件中制作需要触发的功能

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

它更像是一个套接字。由于$root，该活动将在全球范围内进行。

注意将 vue 实例添加到全局窗口对象是一种不好的做法

【参考方案2】：

如果这 2 个组件是兄弟组件（没有父子组件），那么一种解决方案是使用事件总线。

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

window.Event = new Vue();

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

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

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

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

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