如何在 vue.js 2 上调用其他组件中的方法?
How can I call method in other component on vue.js 2?
我的第一个组件是这样的:
<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 方法,然后它可以更改第二个组件中的元素?
如果这 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 and watching this screen cast 找到更多信息。
没有两个组件不具有 parent/child 关系。它们都是通过根vue实例连接起来的。要访问根 vue 实例,只需调用 this.$root
即可获得根实例。
....
.then((response) => {
this.$root.$emit('createImage', item, response)
});
并在第二个组件中制作需要触发的函数
...
mounted() {
this.$root.$on('createImage', (item, response) => {
// your code goes here
})
}
它更像是一个套接字。由于 $root
.
,该活动将面向全球开放
N.B. 将 vue 实例添加到全局 window 对象是一种不好的做法
我的第一个组件是这样的:
<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 方法,然后它可以更改第二个组件中的元素?
如果这 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 and watching this screen cast 找到更多信息。
没有两个组件不具有 parent/child 关系。它们都是通过根vue实例连接起来的。要访问根 vue 实例,只需调用 this.$root
即可获得根实例。
....
.then((response) => {
this.$root.$emit('createImage', item, response)
});
并在第二个组件中制作需要触发的函数
...
mounted() {
this.$root.$on('createImage', (item, response) => {
// your code goes here
})
}
它更像是一个套接字。由于 $root
.
N.B. 将 vue 实例添加到全局 window 对象是一种不好的做法