#45 Vue.jsアウトプット

こんにちは、hiroです😃
星野源さんと新垣結衣さん、本日結婚発表されましたね！
お似合いすぎてぐぅの音も出ないです。笑

ドラマ "逃げるは恥だが役に立つ（逃げ恥）" の再放送流れそうですね、観たことないから再放送されれば見ようと思います🙄
あと、確実にガッキーロスは出るでしょうね。。。

心中お察しします！アウトプットしたいと思います！

スロット

・親コンポーネントから子コンポーネントへHTMLを含んだデータを渡す事が出来る。
・子コンポーネントに "slotタグ" を追記する。
・HTMLのテンプレートを全て子コンポーネントへ渡すことが出来る。
・stylecssのみ、子コンポーネントで記述した内容がslotに反映される。親子でstylecssの記述をしている場合、親のstylecssが優先的に反映される。

フォールバックコンテンツ

・親コンポーネントのテンプレート構文に何も記述が無いときに表示される仕組み。
・表示方法は、子コンポーネントのslotタグ内に "表示させたい内容" を記述する。

v-slot

//App.vue//
<template>
  <div>
    <LikeHeader header-text="hello">
      <template v-slot:title>
        <h2>こんにちは</h2>  
      </template>
      <template v-slot:number>
        <p>{{ number }}</p>  
      </template> 
    </LikeHeader>
  </div>
</template>
<script>
import LikeHeader from './components/LikeHeader.vue';
export default {
  data() {
    return {
      number: 14
    };
  },
  components: {
    LikeHeader: LikeHeader 
  } 
}
</script>


//LikeHeader.vue//
<template>
  <div>
    <slot name="title"></slot>
    <hr>
    <p>いいねの数</p>
    <slot name="number"></slot>
  </div> 
</template>
<script>
export default {
  props: ["headerText"]
};
</script>

<template v-slot:[好きな名前]> [処理内容] </template>

・親コンポーネントから複数のデータを渡す時に "名前つきスロット" を活用する事ができる 。
・App.vue4行目、対象となるコードを "templateタグ" で囲う。
・templateタグの隣に "v-slot" の記述をする。

<slot name="[App.vueのv-slotで記述した名前]"></slot>

・LikeHeader.vue3行目に "slotタグ" と "name属性" を記述する。

<slot></slot>

・ "デフォルトスロット" とは、templateタグの中で記述された名前付きslotタグ以外のslotタグを指す。

本日も最後まで読んで頂き、ありがとうございました！🙇‍♂️

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材Udemy　
超Vue.js2　完全パック