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

概要

コンポーネントから親コンポーネントにデータを渡す方法を学びました。 子コンポーネントが任意のタイミングで、イベントを発火し親コンポーネントにデータ渡しをしていました。

実装

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

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <p>{{title}}</p>
      <!-- 「@」は、v-on ディレクティブの省略系。  -->
      <child @send-title='receiveTitle' />
    </div>
    <script type='text/javascript'>
      // Vue.extend は、ある特定のコンポーネントでのみ使える子コンポーネントを登録する構文
      const child = Vue.extend({
        data: function() {
          return {
            title: 'ボク、運命の人です。'
          }
        },
        template: '<div></div>',
        created: function() {
          // $emit はイベントをトリガする。
          this.$emit('send-title', this.title)
        }
      });

      new Vue({
        el: '#app',
          data: {
            title: ''
          },
          components: {
            'child': child
          },
          methods: {
            receiveTitle: function(text) {
              this.title = text
            }
          }
        });
      </script>
   </body>
</html>

参考リンク