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..."形式でサンプルコードを書いて練習しようと思います。