Vue.js：从“父”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

Answer 2

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

Answer 3

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