イベントを使う

オンラインスキルアップのサンプルコード

by wintyo

HTML

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<script src="https://unpkg.com/vue-types"></script>

JavaScript

const MyComponent = {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    /**
     * 送信時
     * @param {event} event - DOMのイベント
     */
    onSubmit(event) {
      event.preventDefault();
      this.$emit('customSubmit', this.$data.text);
    }
  },
  template: `
    <form @submit="onSubmit">
      <input v-model="$data.text" type="text" />
      <button type="submit">送信</button>
    </form>
  `
};

new Vue({
  el: '#app',
  components: {
    MyComponent
  },
  data() {
    return {
      submittedText: ''
    };
  },
  methods: {
    /**
     * 送信された時
     * @param {string} text - テキスト
     */
    onSubmit(text) {
      this.$data.submittedText = text;
    }
  },
  template: `
    <div>
      <MyComponent
        @customSubmit="onSubmit"
      />
      <div>送信されたテキスト: {{ $data.submittedText }}</div>
    </div>
  `
});