title: How to pass data to child component in vue.js
body: <p>I'm new to vue.js and I try to pass a value to the child component.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="example"&gt;
     &lt;my-component v-bind:data="parentData"&gt;&lt;/my-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>Vue.component('my-component', {
    props: ['data'],
    template: '&lt;div&gt;Parent component with data: {{ data.value }}!&lt;div is="my-component-child" v-bind:data="childData"&gt;&lt;/div&gt;&lt;/div&gt;'
  });
  
  Vue.component('my-component-child', {
    props: ['data'],
    template: '&lt;div&gt;Child component with data: {{ data.value }} &lt;/div&gt;'
  });
  
  new Vue({
    el: '#example',
    data: {
      parentData: {
        value: 'hello parent!'
      },
      childData: {
        value: 'hello child!'
      }
    }
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/v9osont9/2/" rel="nofollow noreferrer">https://jsfiddle.net/v9osont9/2/</a></p>
  
  <p>And I've got this error:</p>
  
  <blockquote>
    <p>[Vue warn]: Property or method "childData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
    (found in )</p>
    
    <p>[Vue warn]: Error in render function: 
    (found in )</p>
    
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <p>What is the proper way to do this?</p>