VueJs 2.0 emit event from grand child to his grand parent component

VueJs 2.0 emit event from grand child to his grand parent component

Asked on November 22, 2018 in vue.js.
Add Comment


  • 2 Answer(s)

         Vue society normally favours utilizing Vuex to answer this type of problem. Modifications are made in Vuex states and DOM illustration goes from there removing the essential for events in some instances.

    Except that, re-producing will be next good option and atlast you select to utilize event bus as brief.

    In grand-child,

    methods: {
        doEvent() {
            try {
                this.$el.dispatchEvent(new Event("eventtriggered"));
            } catch (e) {
                // handle IE not supporting Event constructor
                var evt = document.createEvent("Event");
                evt.initEvent("eventtriggered", true, false);
                this.$el.dispatchEvent(evt);
            }
        }
    }
    

    and in parent,

    mounted(){
        this.$el.addEventListener("eventtriggered", () => this.performAction())
    }
    

    Or, Just re-produce or utilize an bus.

    Answered on November 22, 2018.
    Add Comment

         Events always goes from child to parent. They don’t move in additional. For instance, event from child to grandparent.

         Vue document clearly gives details in Non Parent-Child Communication unit. It is a wide clue that grandparent element, generated an empty vue element that transferred from grandparent down to children and grandchildren through props. Grandparent snoops for event and grand children produce even on “event bus”.

         Few applications utilize universe event bus in-spite of per-element event bus. Utilizing a universe event bus means you would want to have individual event names or namespace. Then there will be no clash between various elements.

    Answered on November 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.