Vue.js: Get data from "parent" Vue

Question

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.

Answer 1

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