Vue.js Child Update Parent

Aug 21, 2018

Child use $emit to send event to parent.

<script>export default {  methods: {    save() {      this.$emit('saved', { message: 'Successful' })    },  }}</script>

Parent listen for event using v-on and update UI accordingly.

<template>  {{ message }}  <Child v-on:saved="saved" /></template><script>export default {  data() {    return {      message: '',    }  },  methods: {    saved(data) {      this.message = data.message    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.