⇧ amazing...
slot および slot-scope 属性は非推奨と言うが、そもやそもVue.jsのスロットって何ぞ?
公式のドキュメントによりますと、
Vue には Web Components spec draft にヒントを得たコンテンツ配信 API が実装されており、 <slot>
要素をコンテンツ配信の受け渡し口として利用します。
⇧ とあり、「Web Components spec draft」ってのが、
⇧ 上記になるらしいのですが、分かり辛いので、
⇧ 上記サイト様の図解がイメージしやすいかも。
■slot
■named slot
■scoped slot
⇧ とりあえず、3パターンの使い方がある模様。
Propsとの違いについては、
⇧ 上記サイト様が詳しそうです。
そして、悲報...
バージョン 2.6.0 で、名前付きスロットとスコープ付きスロットに対する新しい統一構文 (v-slot
ディレクティブ) が導入されました。slot
および slot-scope
属性は非推奨となり置き換えられますが、まだ削除は されず 、ドキュメントも ここ にあります。新しい構文を導入する理由は、この RFC に記述されています。
⇧ slotおよびslot-scope属性は非推奨おぉぉぉぉぉ!!!!!!!!
Element UIでscope slotが使われてるという
まぁ、何でslotなんて調べてたかと言うと、Element UIで出てきたからというね。
⇧ 世界の最も有名なVueのUI frameworkらしい...
<template> <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%"> <el-table-column label="Date" prop="date"> </el-table-column> <el-table-column label="Name" prop="name"> </el-table-column> <el-table-column align="right"> <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="Type to search"/> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-01', name: 'Jessy', address: 'No. 189, Grove St, Los Angeles' }], search: '', } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } }, } </script>
⇧ ってな感じで、唐突にslot-scopeが出てくるんですわ。
しかも、Vueのガイドの図解にある使い方の説明と嚙み合わない...
再掲すると、
■scoped slot
⇧ とあって、Element UIの使い方だと、slot propsのほうが見当たらんのよね...
何なん?裏仕様とかあるんけ?
というように、Vueって説明にない事が多くて辛いですわ...
毎度モヤモヤ感が半端ない...
今回はこのへんで。