VueJS access child component’s data from parent

by

In my child component, there are no buttons to emit changed data. It’s a form with somewhat 5~10 inputs. the data will be submitted once you click the process button in another component. so, I can’t emit every property when it’s changing.

So, what I did,

In my parent component, I can access child’s data from “ref”

e.g

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

Note: If you do this all over the application I suggest move to vuex instead.

More Related Contents:

  1. How to make dynamic routes on the vue router?
  2. Vuex – Computed property “name” was assigned to but it has no setter
  3. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  4. Communication between sibling components in Vue.js 2.0
  5. Vuex – Do not mutate vuex store state outside mutation handlers
  6. Nuxt.js vuex store not persisted
  7. Vuex Action vs Mutations
  8. Vue – how to pass down slots inside wrapper component?
  9. Is it possible to emit from mounted in Vuejs?
  10. How to access Vuex module getters and mutations?
  11. Can we make vue.js application without .vue extension component and webpack?
  12. When should I use Vuex?
  13. vuejs update parent data from child component
  14. Vuex state on page refresh
  15. How to pass a value from Vue data to href?
  16. How to watch store values from vuex?
  17. How to listen for ‘props’ changes
  18. Vue: shared data between different pages
  19. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  20. Is there any way to ‘watch’ for localstorage in Vuejs?
  21. Vue.js – How to remove hashbang #! from url?
  22. Vue.js change {{ }} tags
  23. Mocking methods on a Vue instance during TDD
  24. How to have list + details pages based on API fetched content
  25. Delete a Vue child component
  26. Vue v-on:click does not work on component
  27. Vue.js—Difference between v-model and v-bind
  28. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  29. Passing props to Vue.js components instantiated by Vue-router
  30. Vue.js – Add class to clicked button

Leave a Comment