CODEWITHSUNDEEP
vuejs2
Kem Bardly
Kem Bardly

Reputation: 1675

VueJs how to get data from Vue.component

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

Upvotes: 10

Views: 33850

Answers (2)

theking2
theking2

Reputation: 2852

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.

Upvotes: 0

Egor Stambakio
Egor Stambakio

Reputation: 18156

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
        }
      }
    }
  }
});

Upvotes: 23

Related Questions