Question

195

Vue.js: Get data from parent Vue

rated 0 times [ 198] [ 3] / answers: 1 / hits: 34020 / 9 Years ago, wed, september 9, 2015, 12:00:00

I have an (unchangeable) DOM structure as followed:

<div id=indexVue>

  ...

  <div id=childVue>

  ...

  </div>

  ...

</div>

And two js files:

index.js:

var child = require('childVue');



module.exports = new Vue({

  el: '#indexVue',

  ...

});

childVue.js:

module.exports = new Vue({

  el: '#childVue',

  methods: {

    something: function(){

      // Parent data needed here ...

    },

    ...

  }

});

As shown, I need the data of the indexVue in childVue. Is there any way to pass it to it? I tried to pass it to a function with (v-on=click: childFunction($data)), but that only (logically) returns the data attribute from the childVue and not from the indexVue.

Google does not really help, as Vue is not well-documented.

The real file and DOM structure are way bigger and more complicated, but necessary for my problem are only these files.

Also I am not allowed to use jQuery here, which would make it a task of seconds.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elijahm

Add To Favorites

Follow

Total Points: 674

Total Questions: 124

Total Answers: 79

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 9 Years ago rossthomasn · Accepted Answer

The answer from Pantelis is not true anymore. Vue.js removed the inherit property.

The best way to do that is to pass data through properties;

<div id="indexVue">

  <child-vue :some-data="someData"></child-vue>

</div>

index.js:

module.exports = new Vue({

  el: '#indexVue',

  data: {

    someData: "parent's data"

  },

  components: {

    childVue: require('childVue')

  }

});

childVue.js:

module.exports = {

  template: '<div>{{someData}}</div>',

  methods: {

    something: function(){

      // you can access the parent's data

      console.log(this.someData)

    }

  },

  props: ['some-data'] // kebab case here available as camelcase in template

};

Please note the props property in childVue.js and the case (camelCase vs kebab-case) used for the property name