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.

tony19 · Accepted Answer · 2022-07-15 19:55:21Z

27

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

edited Jul 15, 2022 at 19:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 30, 2016 at 7:08

gsouf

1,07414 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

creedjarrett Over a year ago

Great answer. You also aren't required to put the : before the prop for the child component either. The camelCasing verse the kebab-casing is important to highlight like you did!

Jaroslav Klimčík Over a year ago

@creedjarrett colon depends if it is dynamic prop or not so it can be necessary

creedjarrett Over a year ago

@JaroslavKlimčík i actually just ran into this issue, and you are right. for dynamic props you need the :. Thanks!

TITO · Accepted Answer · 2017-07-24 14:27:17Z

26

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

answered Jul 24, 2017 at 14:27

TITO

8558 silver badges12 bronze badges

7 Comments

Joulss Over a year ago

This is the most clean way to do it IMHO.

A1rPun Over a year ago

Don't ever use this in production because you have no idea where the property is inherited from in the parent chain so you just made the component less reusable. I still +1'd this because I'm prototyping some stuff and this workaround helped me.

MONSTEEEER Over a year ago

@A1rPun, What do you mean by "just made the component less resusable."? As I used the answers its works for me. Is there something I could be worried for?

A1rPun Over a year ago

@MONSTEEEER If your component relies on parent variables to be set the design is flawed because what happens when you place said component in another parent or even in someone else's project? You can't assume the variables to be set and there is also the issue about having multiple parents so from which parent are you getting your data from? These questions raise suspicion in intent so this solution needs to be avoided.

MONSTEEEER Over a year ago

Oohh. Nice, I got your point. In this case, do you have any solution to it? @A1rPun

|

pespantelis · Accepted Answer · 2015-09-09 14:22:00Z

2

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

answered Sep 9, 2015 at 14:22

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

2 Comments

Nico Sänger Over a year ago

This is exactly what I was looking for.

DonnaJo Over a year ago

The only problem with this is that it will break if/when you upgrade to Vue 1.0.* From Vue.js Github Release Notes: "The inherit option has been deprecated. Always pass data to child components via props."

Collectives™ on Stack Overflow

Vue.js: Get data from "parent" Vue

3 Answers 3

3 Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related