0
0

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完全攻略への道」Day2-propsの型定義(defineProps)

Last updated at Posted at 2025-08-14

〇背景

propsという単語を知っており、なおかつ業務ではすでに用意されたpropsを利用している。

早めに理解すべきだと悟り、とりあえずここに書く。

なんか作ったコンポーネントをたどっていくとconst props = defineProps({~})ってなってるよね~。

〇調べる前の自分の認識

プロパティ、値という認識しかない。ここで定義された変数?は上の階層で使われたときに

そのまま読み取られる。いわゆる属性をある程度定義時に固定が出来る?

上から編集されないように下である程度コンポーネントの属性を決めるもの

〇今回のコード例

image.png

image.png

「:」の有無

image.png

  • 1行目 → 常に "primary"
  • 2行目 → btnType の値が変わるたびに更新される
  • 3行目 → 条件によって "danger""primary"

〇調べた結果

親から子供コンポーネントへ渡す際に受け取る仕組み。

子供側でtype(型)を定義しながら、props変数に代入して子供の状態を変化させる。

子供に命令を下すための仲介に必要。

「:」が親側についているときがあるが、「:」がついていたら固定値、ついていなかったら式(文字列リテラル)とのこと。

class=~については子供が定義していないが、Vueとしては「一応付けられるからつけとくよ。でも何も読み込まないからね。」tailwind「お、class=~ってついとるやんけ。じゃあ色変えたろ」

というように働いている。

〇動作解説(図解やコメント付きコード)
特になし

〇実務での注意点

props側では属性ごとに最低type(型)・required(必須か否か)・defaultが設定されている。

@clickなどがあるが、これは本来子供側が持ちうるアクション(buttonだったら@click)を親側でそうやるように命令している。基本親側にそのアクションする関数が定義されている。

〇まとめ・所感

謎が残った点:idなど親で定義しているはずのものが、子コンポーネントに渡っていない

まだ完全理解ではないが、大まかな理解は完了。

特に簡単なボタン操作や真偽値を渡す際の挙動は分かりやすかった。

ただ、まだそれに乗じて子供に渡されていない謎の属性もある。

こちらは一つ一つ詰めていくしかない。

0
0
1

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?