Help us understand the problem. What is going on with this article?

v-slotのサンプルコード(Vue.js初心者)

More than 1 year has passed since last update.

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

kazhashimoto
HTMLコーダー修行中
https://codepen.io/kaz_hashimoto/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away