VueJs how to get data from Vue.component

Question

I want to know how to get data from Vue.component and send to this >>var app = new Vue({ })<< this is my code

Vue.component('my-form', {
template: '#my-form',
props:['ddTechtemp'],
     data: function () {
     return {
        isCores: app.testCorres,
        activeClass: 'isCorrespon',
        errorClass: 'isTech',
        tempData : {cell1 : "",
                    cell2 : "",
                    cell3 : "",
                    cell4 : "",
                    cell5 : "",
                    cell6 : ""
        },
    }
},
watch:{
    tempData:{
        handler:function(newVal,oldVal){

            app.ddTechtemp = newVal;

        },
        deep:true,
    }

},
methods:{

}});

I want to get data from above code and send to this code var app = new Vue({ data: Vue.component.data}) Anyone understand me please help.Thank you

Does this answer your question? Passing data to components in vue.js — T.Todua
– T.Todua, Commented Apr 13, 2020 at 16:09

Egor Stambakio · Accepted Answer · 2017-04-28 11:37:44Z

24

In Vue.js parent-child relationship is run by

1) passing props from parent to child

2) emitting custom events from child to parent

So, if you need to pass some data from child to parent - use this.$emit to emit a custom event with your data, and listen for this event in parent component with v-on:myevent or @myevent shorthand. The data you pass with event is found in $event variable.

Example: https://jsfiddle.net/wostex/63t082p2/51/

<div id="app">
  <myform @newdata="handleData($event)"></myform>
  <p>name: {{ user.name }}</p>
  <p>age: {{ user.age }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: { name: '', age: 0 }
  },
  methods: {
    handleData: function(e) {
      [this.user.name, this.user.age] = e;
    }
  },
  components: {
    'myform': {
      template: `
      <div>
      <input type="text" v-model="formData.name" placeholder="Your name">
      <input type="number" v-model.number="formData.age">
      </div>`,
      data: function() {
        return { formData: { name: '', age: 0 } }
      },
      watch: {
        formData: {
            handler: function() {
              this.$emit('newdata', [this.formData.name, this.formData.age]);
          },
            deep: true
        }
      }
    }
  }
});

answered Apr 28, 2017 at 11:37

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kem Bardly Over a year ago

perfect. Thank Wostex

Kem Bardly Over a year ago

wostex I have a few question. how to push every data of component to some array now when I click button and console.log data it show the last component but in watch it show unique when I edit it

Egor Stambakio Over a year ago

@KemBardly I don't understand your question. Can you make a workable fiddle?

Zoha Shobbar Over a year ago

thanks a lot. what if I have multi components, is there any interference happened between other data that I want to take from another components? thanks again

theking2 · Accepted Answer · 2022-06-22 11:51:40Z

Another way would be to work with advanced things like a Vuex store for ''state management'' but for simple implementations one additional reactive component would work as well. in src/store/index.js

import { reactive } from 'vue';

export const store = reactive({
  some_id : 0,
});

And in a component src/component/SelectComponent.vue

<script setup>
import { store } from "@/store";
</script>

<script>
export default {
  name: "SelectComponent",
  // rest of the component source here
}
</script>

<template>
  <select v-model="store.some_id">
    <option v-for="itm in list" :key=itm.id" :value="itm.id">{{ itm.text }}</option>
  </select>
</template>

Using the component in src/views/SomeView.vue

<script setup>
import { store } from "@/store";
import SelectComponent from "@/components/SelectComponent"
</script>

<script>
//... use store.some_id in some method
</script>

You can store all your global variables in the store/index.js file and keep reactive. You might want to add watchers to observe the store variable(s).

WARNING: this is discouraged for large, complex Vue applications NOTE: this is an easy approach for simple state management not requrring Vuex with all the actions and mutations, states and contexts - plumbing.

Collectives™ on Stack Overflow

VueJs how to get data from Vue.component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related