v-slotのサンプルコード（Vue.js初心者） #JavaScript

Vue.js公式サイトのスコープ付きスロットに、v-slotの解説とコード断片が載っていますが、最初読んだ時、データの関係が私にはよく理解できず、試しにコード書いても変数のReferenceErrorで進まず。「サンプルコード全体(HTML+JavaScript)は一体どのように書けば動作するのか？」と躓いてしまいました。が、試行錯誤してやっとわかったのでここに書きます。

対象Version: Vue.js 2.6.10+

躓いた箇所

この解説文。

親コンポーネント内でスロットコンテンツとして user を使えるようにするためには、要素の属性として user をバインドします:

HTML

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

v-bindの両辺にuserが出てくるので、いざコードを書いていくと「自分が今ここに書いたuserは上の解説文でいうどれのこと？」と、データの関係があやふやな状態になり頭が混乱していきます。

わかった！

v-slotのコーディングを実演しているこの動画を観て、コツがわかりました！

Vue 2.6 First Look And V-Slot Tutorial!

完成したサンプルコード

See the Pen [Vue.js basics] v-slot example 1 by Kazuhiro Hashimoto (@kaz_hashimoto) on CodePen.

理解を助けるためのポイント

先にJavaScript側から。

JavaScript

Vue.component('current-user', {
  data: function() {
    return {
      xxuser: {
        firstName: 'Kazuhiro',
        lastName: 'Hashimoto'
      }
    };
  },
  template:`
<span>
  <slot v-bind:content="xxuser">
    {{ xxuser.lastName }}
  </slot>
</span>
`
});

new Vue({
  el: '#app'
});

v-bind:○○○="▲▲▲" の左辺と右辺で別々の名前を付けて、見た目で区別できるようにしておく。上記サンプルでは、左辺○○○をcontent、右辺▲▲▲をあえてxxuserとした。
dataプロパティはVue.componentの引数に渡すオブジェクト内で定義し、その値は関数リテラル。で、その関数の戻り値は、xxuserを要素に持つオブジェクト。
templateに記述するslotのコンテンツ{{...}}に入れるのは、v-bind:○○○="▲▲▲"の▲▲▲、つまりxxuser経由でアクセスする式。

HTML

<div id="app">
  <current-user>
    <template v-slot:default="slotProps">
      {{ slotProps.content.firstName }}
    </template>
  </current-user>
  <hr>
  <current-user></current-user>
</div>

v-slotの右辺の変数slotPropsでスロットプロパティを受け取る（名前は何でもよい）
Vue.componentで指定したdata: function() {...}の戻り値のオブジェクトが、slotPropsに相当するイメージ。
slotPropsからxxuserのメンバーにアクセスするには、v-bind:○○○="▲▲▲" に指定した○○○部分、つまりcontent経由でアクセスする。（ココが最初わからなくてハマった）

v-slotを使ったコーディングに慣れるまでは、自分にわかりやすいv-bind:content="xx..."形式でサンプルコードを書いて練習しようと思います。