Vue spa slotのメリットがイマイチ分からない

Question

Vueにあるslotのメリットが分かりません。
別にslotじゃなくても出来ると思うのですがslotじゃないと出来ないこととかあるのでしょうか？

<templete>
<child :data=“data” />
</templete>

これでいいと思うのですが...

Answer 1

子コンポーネントの特定の箇所を親側から柔軟に変更できるのはメリットだと思います。
同じ枠組みを使用して、データのバケツリレーも発生させずに特定の箇所だけ別の構造を親から表現できるのは便利です。

例えばelementなどのuiコンポーネントライブラリのソースの中を見るとイメージしやすいかもしれません。
特に複数のUIコンポーネントを組み合わせて使用する前提のものがコードは複雑ですが今回の例としてはわかりやすいです。
elementであれば el-table, el-table-column など。
Element GitHub: https://github.com/ElemeFE/element (packages内参照)

Comments

[_Victorique__]

回答ありがとうございます。
私が感じたメリットとしては、任意の子を親に渡せる点だと感じました。
atomicデザインによる恩恵が大きいと感じました。
ありがとうございました！

Answer 2

イベントを設置したHTMLを子コンポーネントへ渡すのは、他の方法では難しいのではないでしょうか。

またv-htmlはXSSの関係で避けるのがベターなので、HTMLを子コンポーネントへ渡したい場合はたいていslotを使う感じになると思います。

<template>
  <child>
    <button @click="onClick">Click Me!</button>
  </child>
</template>

Comments

[退会済みユーザー]

９ヶ月も前なので反応あるかわかりませんが、、、

私もslotの有用性が理解できずに、なぜslotなどという機能があるのか調べています。

> HTMLを子コンポーネントへ渡したい場合はたいていslotを使う

それならば、子コンポーネントで予めHTMLを組んでおき、データだけを渡して描画するやり方にすれば良いと思うのですが、そうせずにslotを用いてhtmlごと差し込みたいのは何故でしょうか？

slot使えてたらvue中級者とかでかっこいい感じはあるかもしれませんが、
それ以上に、HTMLごとにコンポーネントを作らず汎用コンポーネントとして使いたいと思っている人がslotを使いたがるのだと思っていますが、私の見解では、可読性の観点ではそれは辞めた方が良いと思っており、slotを否定しているわけではありませんが必要悪に感じてしまいます。

バグによる早期対応など保守という観点でも万能コンポーネントではなくしっかりコンポーネントを作るべきではないかなと思っています。