Vue.jsのv-modelを舐めていた件

ブログ

Vueは簡単だ。Vueは勉強したらすぐ使える。

で舐めていたが、複雑な使い方になると浅い知識では詰んだので、備忘録として書くことに・・・。

まずVueとは、ディレクティブというデータを簡単に取り扱えるように特有の記述を使って書くことができるのが一番の特徴である。

ディレクティブ | Vue.js
Vue.js - The Progressive JavaScript Framework

v-modelはユーザーの入力イベントにおいてデータを更新するための糖衣構文である

糖衣構文(とういこうぶん)とは・・・

プログラミング言語において、読み書きのしやすさのために導入される書き方であり、複雑でわかりにくい書き方と全く同じ意味になるものを、よりシンプルでわかりやすい書き方で書くことができるもののことである。

v-modelが使用できるのはinputタグのみ。


<input
  :value="msg"
  @input="msg = $event.target.value"
/>

//上記と同じ意味
<input
  v-model="msg"
/>

コンポーネントにするとわからなくなる

・親から子へpropsでデータを渡すにはv-vindを使用する。

//親
<CustomTextField :value="msg" />

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
};
</script>

//子
<input :value="value" />

<script>
// props オプションの定義
export default {
  props: {
    value: {
      type: String,
    },
  },
};
</script>

子で何かのイベントを親に伝える時は$emitを使う

//①直書きパターン
<input
  :value="value"
  @input="$emit('input', $event.target.value)"
/>

//②変数にするパターン
<input
  :value="value"
  @input="inputedValue"
/>

<script>
export default {
  props: {
    value: {
      type: String,
    },
  },
 method: {
  updateValue(event) {
      this.$emit('input', event.target.value)
    }
   }
};
</script>


//v-modelを使うパターン
<input v-model="inputedValue" />

<script>
export default {
  props: {
    value: {
      type: String,
    },
  },
  computed: {
    inputedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit("input", newValue);
     //引数についてはものにより違うので中身の階層を確認の上
      },
    },
  },
};
</script>

※③の場合、setup関数で書くときの注意

setup(props, ctx) {

//省略

  const inputedValue = computed({

      get: () => props.value,
      set: (event) => {
        ctx.emit('input', event)
      },
    })

v-modelを応用として使用するときの注意!

vーmodelのデータがオブジェクトや配列の場合

複雑な構造になるとv-modelのデータ内にオブジェクトや配列を渡したい時も出てくる。
気をつけたいのは、propsで受け取ったオブジェクトや配列はイミュータブルなものとして扱うこと。

※受け取ったpropsの配列の数と同じようにbooleanなどの配列を新たに作成し、親へ伝えることは可能。

v-modelをコンポーネントにする時の注意

また子コンポーネントから親コンポーネントのインスタンスを直接変更してはいけない。
propsで受け取ったものはイミュータブルであるべき。子のpropsの値は常に親から変更されるべきであることを忘れてはいけない。

v-modelにオブジェクトをバインディングする場合のコンポーネント実装を考える - Qiita
まとめ propsで受け取ったオブジェクトはイミュータブルなものとして扱う v-modelを使うには、算出プロパティのgetterでpropsの参照を、setterでイベント通知をさせる 配列をv-forでループしながらv-m...
タイトルとURLをコピーしました