Child Component Emitting Events and Values to Parent

API (opens new window)

The child component emits events and values to the parent using $emit (multiple values can be passed):

this.$emit('fnX', value)

The parent component listens to the event emitted by the child component using v-on, and triggers a new event that can receive the passed values:

<ComponentName @fnX="fnY"></ComponentName>


methods: {
	fnY(value) {
		console.log(value)
	}
}

Parent-Child Data Passing Demo

See the Pen mdJVqgg by xugaoyi (@xugaoyi) on CodePen.