Question

我正在使用Vue.Js v2。我想在component2-＆gt; c2method中调用component1-＆gt; c1方法，以便在提交后重新加载数据。

Vue.component('component1', {
  methods: {
    c1method: function(){
     alert('this is c1method')
    },
  }
})
Vue.component('component2', {
  methods: {
    c2method: function(){
     component('component1').c1method()//like this
    },
  }
})

Answer 1

对于非父子关系，这与此相同。调用一个方法，显然是任何其他组件的组件的任何方法。只需将$on函数添加到$root实例，然后调用任何其他访问$root并调用$emit函数的组件。

On First component

    ....
    mounted() {
        this.$root.$on('component1', () => {
            // your code goes here
            this.c1method()
        }
    }

并在第二个组件中调用$emit

中的$root函数

    ...
    c2method: function(){
     this.$root.$emit('component1') //like this
    },

它更像是套接字。参考这里

https://stackoverflow.com/a/50343039/6090215

Answer 2

// 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();
        }
    }
});

Answer 3

文档解决了这种情况

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

如果您的组件具有相同的父级，则可以发出父级侦听的事件。然后使用ref属性集，您可以从父级调用c1method。

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

Answer 4

无需黑客解决方案。
在vuejs中，我们可以创建可以全局监听的事件。
使用此功能，每当我们要调用心爱的函数时，我们都将发出此事件。
现在，我们一直都在从组件中监听此事件。每当此全局事件发生时，我们都可以执行我们要调用的方法。
非常简单：

您进入main.js，在创建vue实例之前，编写以下代码：

export const eventBus = new Vue(); // added line


new Vue({
    ...
    ...
    ...
    render: h => h(App)
}).$mount('#app');

在任何要触发目标函数的地方，我们不触发它，我们只是发出此事件：

eventBus.$emit('fireMethod');

现在在具有目标功能的组件中，我们始终会监听此事件：

created() {
    eventBus.$on('fireMethod', () => {
            this.myBelovedMethod();
    })
}

不要忘记在顶部导入eventBus。

import {eventBus} from "path/to/app.js";

就是这样，几行代码，没有任何hacky，所有的vuejs功能都如此。

Answer 5

尝试一下。

@SpringBootTest

Vue.js - 如何从另一个组件调用方法

5 个答案: