Vue: Parent / Child

Simple parent / child interaction with reactive store

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <subcomponent :store="store"></subcomponent>
</div>

JavaScript

Vue.component('subsubcomponent', {
  template: '<div>subsubcomponent: {{val2}}</div>',
  props: {
  	val2: Number
  }
});

Vue.component('subcomponent', {
  template: '<div>subcomponent:{{store.val1}}<subsubcomponent :val2="store.val2"></subsubcomponent></div>',
  props: {
  	store: Object
  }
});

var store = [1,2,3,4,5];

new Vue({
  el: '#app',
  data: {
  	store: store
  }
});

// We can change the store outside of vue
setInterval(() => {
	store.val1++;
 	store.val2 += 2;
}, 1000);