【Vue.js】vueにおける#（シャープ）

2022年6月14日 10:37

バックエンドから久しぶりにフロントに戻って作業していたら爆忘れしてた
こういう'#'とか';'とか特殊記号とかエスケープ、コメントアウトでも使うものって一般的なものか、その言語固有、特有の個別的なものなのか、区別しづらいのでメモしておきます。

Vue.jsにおける#はslotの省略記法

v-on や v-bind と同様に v-slot にも省略記法があり、引数の前のすべての部分 (v-slot:) を特別な記号 # で置き換えます。例えば、v-slot:header は #header に書き換えることができます:

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

しかし、ほかのディレクティブと同様に、省略記法は引数がある場合にのみ利用できます。これは、次のような構文が不正ということを意味します:

<!-- これは警告を引き起こす -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

代わりに、省略記法を使いたい場合には、常にスロット名を指定する必要があります:

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

※そもそもslot（スロット）ってなんぞやな人は下記参照

公式ドキュメント

忙しい人、入門向け、私のように怠惰な人は下記がわかりやすいかも

子コンポーネントとpropsを使ったデータ渡しに似てますね。
差し込み、って言われてますけど（slotがそもそも「差し込み口」だからそりゃそうか）、親側で指定した値を子側で表示なりなんなりできる（親 -> 子）、ってタイプのやつですね

【Vue.js】vueにおける#（シャープ）

Vue.jsにおける#はslotの省略記法

いいなと思ったら応援しよう！