Javascript Vue.js - 如何从另一个组件调用方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42990308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js - How to call method from another component
提问by Miri
I am using Vue.Js v2. I want to call component1->c1method in component2->c2method for reload data after submitting.
我正在使用 Vue.Js v2。我想在 component2->c2method 中调用 component1->c1method 以在提交后重新加载数据。
Vue.component('component1', {
methods: {
c1method: function(){
alert('this is c1method')
},
}
})
Vue.component('component2', {
methods: {
c2method: function(){
component('component1').c1method()//like this
},
}
})
采纳答案by Eric Guan
The docs address this situation
文档解决了这种情况
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
If your components have the same parent, you can emit an event that the parent listens to. Then with the refproperty set, you can call the c1methodfrom the parent.
如果您的组件具有相同的父级，则可以发出父级侦听的事件。然后ref设置属性后，您可以c1method从父级调用。
https://vuejs.org/v2/guide/components.html#Child-Component-Refs
https://vuejs.org/v2/guide/components.html#Child-Component-Refs
回答by Mir Ayman Ali
For non-parent-child relation, then this is the same as this one. Call one method, apparently any method of a component from any other component. Just add a $onfunction to the $rootinstance and call form any other component accessing the $rootand calling $emitfunction.
对于非父子关系，则与此相同。调用一个方法，显然是从任何其他组件调用组件的任何方法。只需$on向$root实例添加一个函数并调用任何其他访问$root和调用$emit函数的组件即可。
On First component
在第一个组件上
....
mounted() {
this.$root.$on('component1', () => {
// your code goes here
this.c1method()
}
}
and in the second component call the $emitfunction in $root
并在第二个组件中调用$emit函数$root
...
c2method: function(){
this.$root.$emit('component1') //like this
},
It acts more like a socket. Reference here
它的作用更像是一个套接字。参考这里
回答by Pooria Honarmand
No need for hacky solutions.
In vuejs we can create events that can be listened globally.
With this feature, whenever we want to call our beloved function, we just emit this event.
Now, we just listen to this event all the time from the component. whenever this global event happens we can execute our method we want to call.
Its pretty simple:
不需要hacky解决方案。
在 vuejs 中，我们可以创建可以全局监听的事件。
有了这个功能，每当我们想要调用我们心爱的函数时，我们只需发出这个事件。
现在，我们只是从组件中一直监听这个事件。每当这个全局事件发生时，我们就可以执行我们想要调用的方法。
它非常简单：
- you go to main.js, before creating the vue instance, write this:
- 你去 main.js，在创建 vue 实例之前，写下这个：
export const eventBus = new Vue(); // added line
new Vue({
...
...
...
render: h => h(App)
}).$mount('#app');
- Anywhere we want to fire the target function, we dont fire it, we just emit this event:
- 在我们想要触发目标函数的任何地方，我们都不会触发它，我们只是发出这个事件：
eventBus.$emit('fireMethod');
- Now in our component that has the target function, we always listen to this event:
- 现在在我们具有目标函数的组件中，我们总是监听这个事件：
created() {
eventBus.$on('fireMethod', () => {
this.myBelovedMethod();
})
}
Dont forget to import eventBus in top.
不要忘记在顶部导入 eventBus。
import {eventBus} from "path/to/app.js";
thats it, few lines of code, no hacky, all vuejs power.
就是这样，几行代码，没有 hacky，所有 vuejs 功能。
回答by Sajjad Shirazy
// Component A
Vue.component('A', {
created() {
this.$root.$refs.A = this;
},
methods: {
foo: function() {
alert('this is A.foo');
}
}
});
// Component B
Vue.component('B', {
methods: {
bar: function() {
this.$root.$refs.A.foo();
}
}
});
回答by Abhishek Kanojia
Try this out.
试试这个。
<template>
...
<component1 ref='componentOne'>
...
</template>
<script>
Vue.component('component2', {
methods: {
c2method: function(){
this.$refs.componentOne.c1method();
}
}
});
</script>
