Pass data from child to parent in Vuejs (is it so complicated?)

by

Props are for parent -> child

You can use $emit for child -> parent

v-on directive captures the child components events that is emitted by $emit

Child component triggers clicked event :

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

Parent component receive clicked event:

<div>
    <child @clicked="onClickChild"></child>
</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}

More Related Contents:

  1. Vue Router return 404 when revisit to the url
  2. How to import and use image in a Vue single file component?
  3. How to implement debounce in Vue2?
  4. How to pass a value from Vue data to href?
  5. Vuex – Do not mutate vuex store state outside mutation handlers
  6. Axios can’t set data
  7. Vue: shared data between different pages
  8. Which command do I use to generate the build of a Vue app?
  9. VueJS access child component’s data from parent
  10. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  11. Nuxt.js vuex store not persisted
  12. Vuex Action vs Mutations
  13. Vue – how to pass down slots inside wrapper component?
  14. Mocking methods on a Vue instance during TDD
  15. How to install vuetify 2.0 beta to the new vue cli project?
  16. How to have list + details pages based on API fetched content
  17. Vue: wait to render until all components are mounted
  18. Is it possible to emit from mounted in Vuejs?
  19. Vue.js—Difference between v-model and v-bind
  20. Passing event and argument to v-on in Vue.js
  21. How to setup SASS/SCSS/sass-loader in Nuxt
  22. Vue 3 Vite – dynamic image src
  23. Vue 3: Is getCurrentInstance() deprecated?
  24. How to make dynamic routes on the vue router?
  25. Can we make vue.js application without .vue extension component and webpack?
  26. Refused to apply style from ” because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
  27. Pass an object as param to router.push ([email protected])
  28. How to use microfrontends with Vue/Nuxt?
  29. Vuejs: Event on route change
  30. Vuex – Computed property “name” was assigned to but it has no setter

Leave a Comment