Vue.js: Get data from "parent" Vue

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

You could also access it by this.$parent.someData in case you cannot bind it on a prop :) for example:

data() { return {  parentData: this.$parent.someData }}

I suggest to use a child component to inherit the scope of its parent.

index.html

<div id="indexVue">  <child-vue></child-vue></div>

index.js:

module.exports = new Vue({  el: '#indexVue',  data: {    someData: "parent's data"  },  components: {    childVue: require('childVue')  }});

childVue.js:

module.exports = {  inherit: true,  template: '<div>...</div>',  methods: {    something: function(){      // you can access the parent's data      console.log(this.someData)    }  }};