부모 구성 요소에서 자식 구성 요소의 메서드를 호출하려면 어떻게 해야 하는가?

부모 구성 요소에서 자식 구성 요소의 메서드를 호출하려면 어떻게 해야 하는가?

나는 4개의 구성요소를 가지고 있다.

먼저 다음과 같은 구성 요소:

<template>
    ...
     <component-second></component-second>
    ...
</template>
<script>
    ...
    export default {
        ...
        updated() {
            // call check method in the component fourth
        }
    }
</script>

두 번째로 내 구성 요소는 다음과 같다.

<template>
    ...
     <component-third></component-third>
    ...
</template>
<script>
    ...
    export default {
        ...
    }
</script>

내 구성 요소는 다음과 같은 세 번째:

<template>
    ...
     <component-fourth></component-fourth>
    ...
</template>
<script>
    ...
    export default {
        ...
    }
</script>

내 구성 요소는 다음과 같이 네 번째:

<template>
    ...
</template>
<script>
    ...
    export default {
        ...
        methods: {
            check() {
                ...
            }
        }
    }
</script>

따라서 구성 요소의 업데이트()가 처음 실행된 경우 구성 요소의 4번째 확인 방법을 호출하고 싶다.

어떻게 하면 좋을까?

Vue 인스턴스를 이벤트 버스로 사용할 수 있다.

전역 변수를 생성하십시오.

var eventHub = new Vue(); // use a Vue instance as event hub

모든 구성 요소에서 이벤트를 내보내려면:

eventHub.$emit('myevent', 'some value');

그리고 이 이벤트를 다시 들으려면 어떤 구성 요소에서든 다음을 수행하십시오.

eventHub.$on('myevent', (e) => {
    console.log('myevent received', e)
});

데모:

var eventHub = new Vue(); // use a Vue instance as event hub

Vue.component('component-first', {
    template: "#component-first-tpl",
    data() { return {someFlag: true} },
    updated() {
      eventHub.$emit('myevent', 'some value');
    }
});
Vue.component('component-second', {
    template: "#component-second-tpl"
});
Vue.component('component-third', {
    template: "#component-third-tpl"
});
Vue.component('component-fourth', {
    template: "#component-fourth-tpl",
    created() {
      eventHub.$on('myevent', (e) => {
      	console.log('myevent received', e)
        this.check();
      });
    },
    methods: {
        check() {
            console.log('check called at fourth');
        }
    }
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<template id="component-first-tpl">
    <div>
        <component-second></component-second>
        
        <br>
        someFlag: {{ someFlag }}
        <button @click="someFlag = !someFlag">Trigger update</button>
    </div>
</template>
<template id="component-second-tpl">
    <div>
        <component-third></component-third>
    </div>
</template>
<template id="component-third-tpl">
    <div>
        <component-fourth></component-fourth>
    </div>
</template>
<template id="component-fourth-tpl">
    <div><h1>I'm Number 4</h1></div>
</template>

<div id="app">
  <p>{{ message }}</p>
  <component-first></component-first>
</div>

참고: 전용 인스턴스를 이벤트 허브로 만드는 것이 환경에서 복잡한 경우 교체할 수 있음eventHub와 함께this.$root(구성 요소 내부) 및 자체 Vue 인스턴스를 허브로 사용하십시오.

내가 시도하고 싶은 것은 부모방식으로 데이터 요소를 만들어 그 자식들을 따라 전달해 주고, 그 다음, 나중에 그것을 보는 것이다.component-four값 변경 시 점검 방법을 트리거한다.

<template>
    ...
    <component-second update-flag="updateFlag"></component-second>
    ...
</template>
<script>
...
export default {
    data(){
        return {
            updateFlag: true;
        }
    }
    updated() {
        // call check method in the component fourth
       updateFlag = !updateFlag;
    }
}
</script>

구성 요소 초:

<template>
    ...
    <component-third update-flag="updateFlag"></component-third>
    ...
</template>
<script>
...
export default {
    ...
    props: ['updateFlag']
}
</script>

세 번째 구성 요소:

<template>
    ...
    <component-fourth update-flag="updateFlag"></component-third>
    ...
</template>
<script>
...
export default {
    ...
    props: ['updateFlag']
}
</script>

네 번째 구성 요소:

<template>
    ...
</template>
<script>
...
export default {
    ...
    props: ['updateFlag'],
    watch: {
        updateFlag: function (val) {
            this.check();
        }
    },
    methods: {
        check() {
            ...
        }
    }
}
</script>

참조URL: https://stackoverflow.com/questions/49524008/how-can-i-call-method-in-child-component-from-parent-component