Simple Parent-Child property trickling

can't pass size property from parent to child

by NesterOne

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script type="x-template" id="parent-template">
---------Parent Start--------------
<br />
<child></child>
<br />
<br />
<child child-prop='Parent Says Hi'></child>
<br />
---------Parent End--------------
</script>
<script type="x-template" id="child-template">
---Child Start---
<br />
1: <span>{{childProp}} <-- (childProp)</span>
<br />
2: <span>{{$parent.dataInParent}} <-- ($parent.dataInParent)</span>
<br />
3: <span>{{$parent.parentProp}} <--  ($parent.parentProp)</span>
<br />
---Child End---
</script>
<div id="app">
  <child child-prop="Child's Message by Child"></child>
  <br/>
  <br/>
  <parent parent-prop="Hello from root"></parent>
</div>

JavaScript

Vue.component("child", {
  props: ["childProp"],
  template: "#child-template",
});

Vue.component("parent", {
	props: ["parentProp"],
  data: function(){
    return{
      dataInParent: 'Hello child',
    }
  },
  template: "#parent-template",
});

new Vue({
  el: '#app'
})