親コンポーネントから子コンポーネントにデータを受け渡しする

概要

コンポーネントから子コンポーネントにデータを受け渡しする方法を学びました。 子コンポーネントを定義するタイミングで、親コンポーネントの変数をバインドすれば良かったです。

実装

実装をコメントと共に示します。

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <!-- 「:」は、 v-bind の省略記法  -->
      <child :hello='hello'></child>
    </div>
    <script type='text/javascript'>
      // Vue.extend は、ある特定のコンポーネントでのみ使える子コンポーネントを登録する構文
      const child = Vue.extend({
        props: {
          'hello': String
        },
        template: '<p>{{ hello }}</p>'
      });

      new Vue({
        el: '#app',
          data: {
            hello: 'やっはろー'
          },
          components: {
            'child': child
          }
        });
      </script>
   </body>
</html>

参考リンク