12-parents-children.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
  <title></title>
  <style>
    #app {
      margin: 1em;
      font-size: 1.2em;
    }

    .component div {
      margin-bottom: 1em;
    }
  </style>
</head>

<body>

  <div id="app">
    <my-component :parent-msg="msg"></my-component>

    <hr>
    <div> {{ msg }}</div>
  </div>

  <script type="text/x-template" id="my-component">
    <div class="component">
      <div> ParentMsg: {{ parentMsg }} </div>
      <div> ChildMsg: {{ msg }} </div>
    </div>
  </script>

  <script>
    // register
    Vue.component('my-component', {
      props: ["parentMsg"],
      template: '#my-component',
      data: function() {
        return {
          msg: 'Msg of Child!'
        }
      }
    });

    // a root instance
    new Vue({
      el: '#app',
      data: {
        msg: 'Msg of Parent!'
      },
      mounted() {
        console.log('$children: ', this.$children[0].msg);
      }
    });
  </script>


</body>

</html>