※当サイトの記事には、広告・プロモーションが含まれます。

slot および slot-scope 属性は非推奨と言うが、そもやそもVue.jsのスロットって何ぞ?

nazology.net

⇧ amazing...

slot および slot-scope 属性は非推奨と言うが、そもやそもVue.jsのスロットって何ぞ?

公式のドキュメントによりますと、

jp.vuejs.org

Vue には Web Components spec draft にヒントを得たコンテンツ配信 API が実装されており、 <slot> 要素をコンテンツ配信の受け渡し口として利用します。

https://jp.vuejs.org/v2/guide/components-slots.html

⇧ とあり、「Web Components spec draft」ってのが、

github.com

⇧ 上記になるらしいのですが、分かり辛いので、

vuejs.org

⇧ 上記サイト様の図解がイメージしやすいかも。

■slot

■named slot

■scoped slot

⇧ とりあえず、3パターンの使い方がある模様。

Propsとの違いについては、

coliss.com

⇧ 上記サイト様が詳しそうです。

そして、悲報...

バージョン 2.6.0 で、名前付きスロットとスコープ付きスロットに対する新しい統一構文 (v-slot ディレクティブ) が導入されました。slot および slot-scope 属性は非推奨となり置き換えられますが、まだ削除は されず 、ドキュメントも ここ にあります。新しい構文を導入する理由は、この RFC に記述されています。

https://jp.vuejs.org/v2/guide/components-slots.html

⇧ slotおよびslot-scope属性は非推奨おぉぉぉぉぉ!!!!!!!!

Element UIでscope slotが使われてるという

まぁ、何でslotなんて調べてたかと言うと、Element UIで出てきたからというね。

element.eleme.io

⇧ 世界の最も有名な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って説明にない事が多くて辛いですわ...

毎度モヤモヤ感が半端ない...

今回はこのへんで。