Can't get data from a Component. ReferenceError: var is not defined

vue-core

#1

Here is the code.

HTML

<div id="app">
  <app-tabs :prop="data1"></app-tabs>
  <br />
  <app-tabs :prop="data2"></app-tabs>
</div>

Javascript

Vue.component('app-tabs', {
  props: ['prop'],
  template: '<div>{{prop}}</div>',
  data: function() {
    return {
      data1: '111',
      data2: '222'
    }
  }
});

var app = new Vue({
    el: '#app'
});

data1 and data2 are not defined.
Please help to figure out why it is happening. Thank you.


#2

You’re assigning the data in the wrong context. To pass data as a prop it shouldn’t assigned in the component, but the parent.

var app = new Vue({
    el: '#app',

    data: function() {
      return {
        data1: '111',
        data2: '222'
      }
    }
});