【Vue.js】『$emit』での引数の渡し方について

Question

前提

前提:Vue.js超初心者です。

Vue.jsを用いて単一のHTMLで動作する簡単なデータ入力フォームを作りました。
その後、作成したものをコンポーネントとして実装を進めているのですが上手くいきません。

〇画像のようにデータ入力後insertボタンを押下することでデータが追加されるようになっています。

発生している問題・実現したいこと

以下の2つのコンポーネントを作成し表示までは出来たのですが、
入力フォームにデータ入力後、insertボタンを押して『$emit』を用いて『insertTable: function ()』実行後の、
入力したデータの引き渡し方がイマイチ分からず詰まっています。
現状の仕様ではデータが受け取られていないため、空のNameがinsertされる形となっています。

〇作成したコンポーネント
todo-insert（入力フォーム、insertボタン）
todo-category（テーブルデータ表示）

恐らく『$emit』で『todo-insert』コンポーネントの『message: 'Insert Name'』を渡せれば上手くいくとは思うのですが…。

コンポーネント化前のソース

  <div id="table">
    <!-- ユーザー入力の制御 -->
    <!-- 入力フォーム -->
    <input v-model="message">
    <!-- 送信ボタン -->
    <button v-on:click="insertTable">Insert</button>
    <table>
      <caption>TABLE</caption>
      <thead>
        <tr>
          <th id="">ID</th>
          <th id="">Name</th>
        </tr>
      </thead>
      <tbody>
        <!-- 条件分岐とループ -->
        <tr v-if="seen" v-for="category in categories">
          <td>
            {{ category.id }}
          </td>
          <td>
            {{ category.name }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    var table = new Vue({
      el: '#table',
      data: {
        message: 'Insert Name',
        // 表示条件分岐
        seen: true,
        //テーブルデータ部
        categories: [
          { 
            id: '001',
            name: 'Tanaka' 
          },
          { 
            id: '002',
            name: 'Tamura' 
          },
          { 
            id: '003',
            name: 'Nakata' 
          },
        ]
      },
      methods: {
        insertTable: function () {

          // 重複チェック
          let result = this.categories.filter((element, index, seif) => 
            seif.findIndex(e => 
              e.name === this.message
            ) === index
          )

          // 重複ありの場合、処理終了
          if (result.length > 0){
            alert('入力データが重複しています。')
            return
          }

          // データ追加(リアクティブに追加)
          this.$set(this.categories,　this.categories.length, {id: ("000" + (this.categories.length + 1)).slice( -3 ), name: this.message})
        }
      }
    })
  </script>

コンポーネント化作業中のソース

  <div id="table">
    <!-- ユーザー入力の制御 -->
    <!-- 入力フォーム -->
    <todo-insert
      v-on:insert="insertTable"
    ></todo-insert>
    <table>
      <caption>TABLE</caption>
      <thead>
        <tr>
          <th id="">ID</th>
          <th id="">Name</th>
        </tr>
      </thead>
        <tbody>
          <!-- 条件分岐とループ -->
           <tr
           is="todo-category"
            v-if="seen"
            v-for="category in categories"
            v-bind:key="category.id"
            v-bind:todo="category"
          ></tr>
        </tbody>
    </table>
  </div>


  <script>
    Vue.component('todo-insert', {
      data: function () {
        return {
          message: 'Insert Name',
          insertTable: ''
        }
      },
      template: `
        <div>
          <input v-model="message">
          <button v-on:click="$emit('insert',message)">Insert</button>
        </div>
      `
    })

    Vue.component('todo-category', {
    props: ['todo'],
    template: '\
      <tr>\
                  <td>\
                  {{ todo.id }}\
                  </td>\
                  <td>\
                    {{ todo.name }}\
                  </td>\
                </tr>'
    })
    
    var table = new Vue({
      el: '#table',
        data: function() {
          return{
            // 表示条件分岐
            seen: true,
            //テーブルデータ部
            categories: [
              { 
                id: '001',
                name: 'Tanaka' 
              },
              { 
                id: '002',
                name: 'Tamura' 
              },
              { 
                id: '003',
                name: 'Nakata' 
              },
            ]
          }
        },
        methods: {
          insertTable: function () {

            // 重複チェック
            let result = this.categories.filter((element, index, seif) => 
              seif.findIndex(e => 
                e.name === this.message
              ) === index
            )

            // 重複ありの場合、処理終了
            if (result.length > 0){
              alert('入力データが重複しています。')
              return
            }

            // データ追加(リアクティブに追加)
            this.$set(this.categories,　this.categories.length, {id: ("000" + (this.categories.length + 1)).slice( -3 ), name: this.message})
          }
        }
      }
    )
  </script>

Answer 1

$emit で送信した値は指定したメソッドの引数にセットされます。

this.$emit("insert", "nya-")

...

<todo-insert v-on:insert="insertTable">

...

methods: {
  insertTable (message) {
    message // nya- 
    // 以下 this.message を message に書き換える
  }

https://jsfiddle.net/waup0yzh/

Comments

[Laskarina]

的確な回答本当にありがとうございました。
複雑に考え過ぎていたようです…。