1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[vue]カスタムコンポーネントでv-model使いたいよ~

Posted at

アホロートル(メキシカンサラマンダー)

自宅繁殖とかして社長や社員にあげたり、ペットショップとかに売ったりしてましたが、如何せんバブの餌がブラインシュリンプというプランクトンで、こいつの生成・維持がクソめんどくさかったため今はこの2匹だけ飼育中
IMG_0049.jpeg
日本だとウーパールーパーって名前で浸透している、両生類で目がバチクソ悪くて体がヌメヌメして普段は動きが鈍くさいけど眼の前に動くものが有ると凄い勢いで噛みついてくる何考えてるのかわからない再生力が尋常じゃない生き物です。
※共食いとかで腕無くなっても、3ヶ月ぐらいで骨から指先までキレイに(若干細くはなるけど)再生していく、なんとも生命力の強い不思議生物です。

ちなみにロートルって中国語で【老人・年寄り・老いぼれ】と言う意味合いがあるみたいで、アホなロートルってボケ老人かいな!!

vue3で独自コンポーネント作ったけど、v-modelで値を渡したいよ~な話

vue3の出始めの時とかって、独自コンポーネントに何か値を渡すときはdefinePropsで値を渡して、値の変更を反映するためにdefineEmitsで親に通知→親コンポーネントにて反映みたいな流れで実装していたかと思いますが、Vue3.4以降からは普通にv-modelが使えるようになるらしいです。

旧版(3.4前の作り方)

definePropsとdefineEmitsでそれっぽい動きをするアレ
<!-- 子コンポーネント -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>


<!-- 親コンポーネント -->
<ChildComponent
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

新版(3.4以降の作り方)

v-model使ったるぜ
<!-- 子コンポーネント -->
<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>


<!-- 親コンポーネント -->
<ChildComponent v-model="foo" />

当然、元のdefinePropsとdefineEmitsも使える(定義できる)ため、
双方向でやり取りしたいのはv-modelを使い、
値だけ渡せればいいや的なときはdefinePropsを使い、
何かイベントを伝達してほしいなぁみたいなときはdefineEmitsを使うなど、
きちんと役割を決めて実装するのがスマートだねっていうアレでした

中身を知ってれば。。。

どんな言語もそうですが大元の【仕組み】を知ってれば、楽に書けるようになったなぁという恩恵が有るかと思いますが、
【便利だから】とはじめからフレームワークやライブラリを使ったりするとそれが当たり前になってしまい、
裏でどんな動きをしているのかなど意識・考えなくなってしまうのはもったいないなぁという気持ちがあります。

Javaで言うと、リフレクションとかServlet/JSPを知らずにSpringBootから入った場合、どうやってリクエストからFormに値が設定されるとか、ModelViewを設定しただけで画面にHTMLが返るとかを考えることなく、【良く分からんけど、そういうものだから】と使ってしまうんだろうなぁ。

プログラムだけに限らず、世の中のあらゆる事象の本質だったり思想的なものにちょっとでも興味が持てれば、色んなアプローチで解決・改善に役に立つんじゃないかなぁと壮大な思いをはせてみる

1
2
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?