2021/07/03

vue3で子コンポーネントの値を親コンポーネントで取得

TD;DR;

単純に親コンポーネントから親コンポーネントに値が渡す時ですが、例えば、あるボタンがクリックされた時に子から親コンポーネントに値を渡すのに、親の変数に値をそのまま渡す・・・
ってやるとこれはアンチパターンと言う、やってはいけない例の一つみたいです。

子から親の変数を操作すると、いろんな子から操作される可能性があるのでどこから変更されているか分からなくなりバグを起こす可能性が高くなるからです。

解決策として、親の状態を変更する。親の状態が変更になったら、親の関数を実行して子の値を取得すると言うパターンが良いようです。
親の状態を変更を監視する為に渡す値を（handler）で、値を渡して関数等を実行するをハンドリングすると言うようです。

では実際どのようなコードを実装するのがよいのか？
Vue.jsでコンポーネントの親子間のデータの受け渡しは，
・親→子の場合propsを使用
・子→親場合eventを使用
することが推奨されています．またデータは親が持つべきとされてます。

ボタンにハンドラー処理イベントの関数を設定

                   <jet-button @click="clickHandler" class="bg-yellow-400 text-base m-2"
                    >選択</jet-button
                  >

hundler処理をsetupに仕込みます。

  setup(props, context) {

    const clickHandler = () => {
      context.emit("child-click");
    };

    return { clickHandler };
  },

親コンポーネントがDialogの場合
v-on:child-click=”setvalue”
でchild-clickハンドラーがemitされた場合setVlue関数が実行されます。

             <Dialog
                v-on:child-click="setValue"
              />