Vue.js - 다른 컴포넌트에서 메서드를 호출하는 방법

Vue.js - 다른 컴포넌트에서 메서드를 호출하는 방법

Vue를 쓰고 있어요.Js v2. component2-> c1method in component2-> c2method를 호출하여 전송 후 데이터를 새로고침합니다.

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

비부모-자녀 관계의 경우, 이것은 이것과 같습니다.한 가지 메서드를 호출합니다.다른 컴포넌트에서 컴포넌트의 메서드를 호출합니다.a를 추가해 주세요.$on기능하다$rootinstance 및 call은 액세스 하는 다른 컴포넌트에서$root및 호출$emit기능.

첫 번째 컴포넌트

....
mounted() {이것.$root.$oncomponent1', () => {// 코드가 여기에 들어갑니다.this.c1gl()}}

두 번째 컴포넌트에서는$emit에서 기능하다.$root

...c2syslog: function(){이것.$root.$component1') //이렇게},

소켓에 가깝습니다.참조처:

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

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

진부한 해결책은 필요 없습니다.
vuej에서는 글로벌하게 청취할 수 있는 이벤트를 생성할 수 있습니다.
이 기능을 사용하면, 마음에 드는 기능을 호출하고 싶을 때마다, 이 이벤트를 발신합니다.
이 이벤트는 항상 컴포넌트에서 듣기만 하면 됩니다.이 글로벌 이벤트가 발생할 때마다 호출하고 싶은 메서드를 실행할 수 있습니다.

매우 간단합니다.

1. main.view로 이동하여 vue 인스턴스를 작성하기 전에 다음과 같이 기록합니다.

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


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

2. 타깃 기능을 발사하고 싶은 곳이라면 어디서든 발사하지 않고 이 이벤트를 발생시킵니다.

eventBus.$emit('fireMethod');

3. 타깃 기능이 있는 컴포넌트에서는 항상 다음 이벤트를 듣습니다.

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

eventBus를 맨 위에 Import하는 것을 잊지 마십시오.

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

코드 몇 줄에 해킹도 안되고 전부 vuejs의 힘이에요

문서는 이 상황에 대처합니다.

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

구성 요소의 상위 항목이 동일한 경우 상위 항목이 수신하는 이벤트를 내보낼 수 있습니다.그 후,ref프로퍼티 세트를 호출할 수 있습니다.c1method어버이로부터.

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

이거 한번 써보세요.

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

Vue.js v3에서 솔루션을 찾고 있는 경우:

https://v3.vuejs.org/guide/migration/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()

언급URL : https://stackoverflow.com/questions/42990308/vue-js-how-to-call-method-from-another-component