如何在 vue.js 2 上调用其他组件中的方法? [英] How can I call method in other component on vue.js 2?
问题描述
我的第一个组件是这样的:
...</模板><脚本>导出默认{...方法: {添加照片() {const 数据 = { id_product: this.idProduct}const item = this.idImagethis.$store.dispatch('addImage', data).then((响应) => {this.createImage(项目，响应)});},}}如果调用了addPhoto方法，它会调用ajax然后得到响应ajax
我想将响应 ajax 和另一个参数发送到方法 createImage.方法 createImage 位于其他组件(第二个组件)
我的第二个组件是这样的:
<div><ul class="list-inline list-photo"><li v-for="项目中的项目"><div v-if="clicked[item]"><img :src="image[item]" alt=""><a href="javascript:;"class="thumb-check"><span class="fa fa-check-circle"></span></a><a v-else href="javascript:;"class="拇指拇指上传"title="添加照片"><span class="fa fa-plus fa-2x"></span></a>
</模板><脚本>导出默认{...数据() {返回 {项目:[1,2,3,4,5],clicked: [],//使用数组，因为您的项目是数字}},方法: {创建图像(项目，响应){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.
这篇关于如何在 vue.js 2 上调用其他组件中的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
