Skip to content

Emitting from Child to Parent

RayVector edited this page Dec 15, 2020 · 2 revisions

Emits in Child:

(ThirdElement.js) - child of MainElement.js

  methods = {
    // emit method to parent, emitName should be like emit event in parent
    doEmit: () => this.emit(emitName, emitData) 
  }

Handle Emits on Parent:

(MainElement.js) - parent of ThirdElement.js

  childList = [
    {
      component: ThirdApp,
      props: {
        msg: () => this.data.childProp,
      },
      emitEvents: {
        newEmit: emitData => {
          this.changeData({ // update state from child by emit event
            text: emitData,
          })
        },
      },
    },
  ]

Emit Data as Prop:

(ThirdElement.js) - child of MainElement.js

  methods = {
    doEmit: () => {
      this.emit('newEmit', `from data: ${this.data.emitMsg}, from props: ${this.props.msg}`)
    },
  }

Clone this wiki locally