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

sf6xfgos  于 2023-05-18  发布在  Vue.js
关注(0)|答案(7)|浏览(498)

我正在使用Vue.Js v2。我想在component 2->c2method中调用component 1-> c1 method,以便在提交后重新加载数据。

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

zed5wv101#

对于非父-子关系,则此与此相同。调用一个方法,显然是从任何其他组件调用组件的任何方法。只需向$root示例添加一个$on函数,并从任何其他访问$root并调用$emit函数的组件调用。
第一个组件

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

在第二个组件中调用$root中的$emit函数

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

它的作用更像一个插座。参考此处
https://stackoverflow.com/a/50343039/6090215

5n0oy7gb

5n0oy7gb2#

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

j8yoct9x3#

不需要黑客解决方案。
在vuejs中,我们可以创建可以被全球监听的事件。
有了这个特性,每当我们想调用我们心爱的函数时,我们就发出这个事件。
现在,我们只需要一直从组件中监听这个事件。每当这个全局事件发生时,我们就可以执行我们想要调用的方法。
很简单
1.在创建vue示例之前,你转到main.js,这样写:

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

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

1.在任何我们想要激发目标函数的地方,我们都不激发它,我们只发出这个事件:

eventBus.$emit('fireMethod');

1.现在,在我们的组件中,有目标函数,我们总是监听这个事件:

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

不要忘记在top中导入eventBus。

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

就是这样,几行代码,没有黑客,所有vuejs的力量。

dm7nw8vv

dm7nw8vv4#

医生们解决了这种情况
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
如果组件具有相同的父组件,则可以发出父组件侦听的事件。然后设置了ref属性,就可以从父级调用c1method
https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

92vpleto

92vpleto5#

试试这个

<template>
 ...
 <component1 ref='componentOne'>
...
</template>
<script>
  Vue.component('component2', {
    methods: {
     c2method: function(){
       this.$refs.componentOne.c1method();
     }
   }
  });
</script>
hgncfbus

hgncfbus6#

如果有人在Vue.js v3中寻找解决方案:
https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus
https://github.com/developit/mitt#install

import mitt from 'mitt'
    
    const emitter = mitt()
    
    // listen to an event
    emitter.on('foo', e => console.log('foo', e) )
    
    // listen to all events
    emitter.on('*', (type, e) => console.log(type, e) )
    
    // fire an event
    emitter.emit('foo', { a: 'b' })
    
    // clearing all events
    emitter.all.clear()
qcbq4gxm

qcbq4gxm7#

我在这个SO问题中找到了Vue 3的一个很好的解决方案,并回答https://stackoverflow.com/a/72348802/18091372
它使用Vue3的defineExpose函数使内部函数在组件外部可用。
如果在ComponentA中有这样的结构

<template>
    <div>
       <ComponentB ref="componentb" />
    </div>
</template>

其中ComponentB具有:

<script setup>
defineExpose( {internal_function} )

function internal_function() {
    console.log( 'hello' )
}
</script>

那么,ComponentA可以做:

<script setup>
const componentb = ref(null)

componentb.value.internal_function()
</script>

hello将被记录到控制台。

相关问题