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

ブログ

2022.12.02

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

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

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

ディレクティブ | Vue.js

Vue.js - The Progressive JavaScript Framework

1 v-modelはユーザーの入力イベントにおいてデータを更新するための糖衣構文である
2 コンポーネントにするとわからなくなる
3 v-modelを応用として使用するときの注意！
- 3.1 vーmodelのデータがオブジェクトや配列の場合
- 3.2 v-modelをコンポーネントにする時の注意

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)
      },
    })