概要

Vue.jsのpropsと$emitについて理解にかなり時間がかかったので簡単にまとめておく

propsって？

コンポーネント化したときに使うものだよ。
親コンポーネントから子コンポーネントにデータを渡したい時に使うよ。
htmlのタグの要素（aタグのhref要素）と同じ感じで親コンポーネントのタグ内で渡す値を指定するよ。
親コンポーネントのタグ内で渡したい値をpropsに格納することができるよ。
親コンポーネントのVueインスタンス内で定義した変数をv-bindでpropsに紐付けることができるよ。
親コンポーネントから配列が渡ってきて、子コンポーネント側で変更を加えちゃうと親側にも影響を与えるよ。（参照渡し）関数を用いてから値を変更しようね。

例

  <!DOCTYPE html>
  <html lang="ja">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
      <style>
          .parent {
              width: 800px;
              margin: 0 auto;
              border: 1px red solid;
          }
          .child {
              width: 30%;
              margin: 0 auto;
              border: 1px blue solid;
          }
      </style>
  </head>
  <body>
      <div id="app" class="parent">
          <emit-test class="child" @custom-event="parentMethod">
          </emit-test>
      </div>

      <script>
          let emitTest = {
              template: `<div>
                  <button @click="childMethod">
                      子側のボタン
                  </button>
              </div>`,
              methods :{
                  childMethod(){
                      this.$emit('custom-event', '子の値')
                  }
              }
          }
          let app = new Vue({
              el: '#app',
              components: {
                  emitTest
              },
              data(){
                  return{

                  }
              },
              methods: {
                  parentMethod(e){
                      console.log(e)
                  }
              }
          })
      </script>
  </body>
  </html>

emitって

コンポーネント化した時に使うものだよ。
子コンポーネントから親コンポーネントにデータを渡したい時に使うよ。
まずは子コンポーネントでthis.$emit('カスタムイベント名', 親コンポーネントに渡したい値)を子側の関数として定義、その関数をv-onとかで発火するように設定するよ。
そして親コンポーネントでカスタムイベント名とカスタムイベントが実行された時に実行する親側の関数として定義するよ。その関数の中では子側から受け取った値をどうにかする処理を書くよ。（ログに出すとか、配列に入れるとか）
カスタムイベントは必ずケバブケースで定義するよ。

例

  <!DOCTYPE html>
  <html lang="ja">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
      <style>
          .parent {
              width: 800px;
              margin: 0 auto;
              border: 1px red solid;
          }
          .child {
              width: 30%;
              margin: 0 auto;
              border: 1px blue solid;
          }
      </style>
  </head>
  <body>
      <div id="app" class="parent">
          <emit-test class="child" @custom-event="parentMethod">
          </emit-test>
      </div>

      <script>
          let emitTest = {
              template: `<div>
                  <button @click="childMethod">
                      子側のボタン
                  </button>
              </div>`,
              methods :{
                  childMethod(){
                      this.$emit('custom-event', '子の値')
                  }
              }
          }
          let app = new Vue({
              el: '#app',
              components: {
                  emitTest
              },
              data(){
                  return{

                  }
              },
              methods: {
                  parentMethod(e){
                      console.log(e)
                  }
              }
          })
      </script>
  </body>
  </html>

miriwoのブログ

IT系の技術や少し趣味よりのことも投稿してゆくよ😊

Vue.js propsと$emitの個人用メモ

概要

propsって？

emitって