どのように私は私のサイトでVueスロットを使用している

最初のVue tidbitにハイと言う👋 そろそろVueをコードTidBitsでカバーし始める頃です😉‬
新しい名前付きスロット短縮を使用します.これはVue 2.6.0で利用可能です👍

<!-- Old -->
<template v-slot:content>

<!-- New -->
<template #content>

Vue、手ダウン、これまで最高のドキュメントを持っている!だから私はそれと競争しようとするつもりはない.ちょうど私がテニス試合にセレナウィリアムズと競争する大胆さを決して持っていない方法のように.私にはかなりのサーブがあります🎾 ちょうど冗談を言うと、大麦がボールを打つ😂).
その代わりに、私はどのように私のサイトのスロットを使用するかについて話すつもりです.コム🙋🏻‍♀️
注意:この記事はVueの基本的な知識を仮定します.それで、あなたがVueに完全な初心者であるならば、私は最初にVue Docsをチェックアウトすることを提案します:

Vue Docs: Introduction

Vue Docs: Components Basics

スロットとは
私はスロットをテンプレートと考えるのが好きです.あなたがどのようにあなたの履歴書を作成するかを考えてください、あなたは通常空の文書から始めません.あなたはGoogle Docsを開き、それから再開テンプレートを見つけて、構築するでしょう.そして、それはまさにスロットです.それはあなたがすぐにゼロから始めることなく空白を埋めることができるテンプレートです.超効率👏

非dev項で説明したコンポーネントvsスロット
私が最初にスロットを学んだとき、私はスーパー混乱しました.私はスロットがいくつかの別のものであると考え続けました.しかし、スロットはありません.それは付加的なスロット機能を持っているVueコンポーネントです.それはスーパーパワーのコンポーネントです.これは、構成されているコンポーネントです.
うーん私は私の説明とどこにでも取得していないと思いますし、おそらくあなたは前にいた混乱している😂 非devの項で説明しましょう.
あなたの台所引き出しとして構成要素を考えてください.それはオープンスペースストレージです.しかし、オープンスペースの問題は、それは本当に迅速に厄介なことができます.

あなたのツールを整理するための素晴らしい方法は、別のセクションにツールを並べ替えることができますデバイダーを使用することです.そして、それはまさにスロットです.それはあなたが良いセクションにコンテンツを整理するのに役立ちます👍

イメージ信用:https://www.homedit.com/drawer-organizing-tips/
それははるかに良いです!スーパーMarie Kondo あなたが私に尋ねるならば✨

どのように私のサイトはスロットを使用している
私のサイト全体のスロットに建てられている.主要な例は私の記事ページです.これらは記事ページと呼ぶものです.

/tidbits/some-code-note-article
# ex. https://www.samanthaming.com/tidbits/82-html-audio-tag/

/blog/some-blog-article
# ex. https://www.samanthaming.com/blog/how-to-ace-the-developer-interview/

/flexbox30/some-flexbox-article
# ex. https://www.samanthaming.com/flexbox30/1-flexbox-intro/

あなたがそれらのサイトを訪問するならば、あなたは彼ら全員が全く類似しているように見えます.それはすべてのスロットを使用しているためです.それで、私がこれを構築する方法でステップバイステップを経験しましょう.
注:私はそれが少し簡単に従うように簡単にするつもりです.さあ、行きましょう!💪

1 .レイアウト
スロットを構築するとき、あなたのレイアウトを計画するのは良い考えです.そして、これは私の記事のレイアウトのように見える.

だから私のレイアウトでは、5スロットがあります.

article-header

article-content

article-footer

side

banner

2 .スロットのビルド
スロットの構築は、コンポーネントの構築とは異なりません.本質的に、スロットはスーパーパワーを持つコンポーネントである.以下に、コンポーネントの設定方法を示します.

<!-- ArticleLayout.vue -->
<template>
  <div>
    <article>
      <slot name="articleHeader" />
      <slot name="articleContent" />
      <slot name="articleFooter" />
    </article>
    <aside>
      <slot name="side" />
    <aside>
    <div>
      <slot name="banner" />
    </div>
  </div>
</template>

3 .スロットの消費
よし、スロットを作った.次に、その中にいくつかのものを貼りましょう.

<!-- TidbitPage.vue -->
<article-layout>

  <template #articleHeader>
    <h1>I am the header</h1>
  </template>

</article-layout>

それで、我々がここでしていることを破壊しましょう.我々がしている最初のことは、我々の呼び出しですarticle-layout コンポーネント.それから、私はAでそれを包むことによって、私のスロットに内容を挿入しています<template> タグとリファレンスのスロット名# . と内部<template> 私のコンテンツを挿入する場所です.

ファイナル
それをまとめると、次のようになります.

<!-- TidbitPage.vue -->
<template>
  <article-layout>

    <template #articleHeader>
      <h1>I am the header</h1>
    </template>

    <template #articleContent>
      <p>I am the content</p>
    </template>

    <template #articleFooter>
      <footer>I am the footer</footer>
    </template>

    <template #side>
      <aside>I am the side stuff</aside>
    </template>

    <template #banner>
      <div>I am the banner</div>
    </template>

  </article-layout>
<template>

資源

Vue Docs: Named Slots Shorthand

Vue Docs: Components Basics

CSS Tricks: Intro to Vue.js - Components, Props, and Slots

読書ありがとう❤
より多くのコードtidbitsを見つけるためにsamanthaming.com
🎨
🌟
👩🏻‍💻