Vueで1つのHTML要素から別の要素に動的に切り替える

最近、友人がVUEテンプレートブロックで1つのHTML要素を別の要素に動的に変更する方法を尋ねました。たとえば、特定の条件に応じて<div>に切り替えます<code><p>要素。重要なのは、一連の<code>v-ifおよびv-elseコードに依存せずにこれを行う方法です。最初は、そうする強い理由がわからなかったので、あまり気にしませんでした。これは一般的ではありませんでした。しかし、同じ日に、彼は再び私に連絡し、要素の種類を変更する方法を学んだと私に言った。彼は興奮して、Vueには動的な要素として使用できる組み込みコンポーネントがあることを指摘しました。

この小さな機能は、テンプレートコードをシンプルできれいに保ちます。 v-ifとv-elseの冗長コードを削減するため、コードの理解と維持が容易になります。これにより、メソッドまたは計算されたプロパティを使用して、スクリプトブロックによく書かれた、より複雑な条件を作成できます。これらのものは、テンプレートブロックではなく、スクリプトに配置する必要があります。

私がこの記事を書いた主な理由は、この関数が私たちが働いている設計システムの多くの場所で使用されていることです。確かに、これは大きな機能ではなく、少なくとも私が知る限り、ドキュメントではほとんど言及されていません。ただし、特定のHTML要素をコンポーネントにレンダリングするのに役立つ可能性があります。

Vueの組み込み<component></component>要素

VUEには、ビューを動的に簡単に変更できる機能がいくつかあります。機能の1つは組み込みです<component></component>コンポーネントが動的に切り替えることを可能にする要素。 VUE 2およびVUE 3ドキュメントにHTML要素を使用してこの要素を使用するという簡単な説明があります。これは私たちが今探求する部分です。

コンセプトは使用することです<component></component>要素のこの特性は、本質的に類似しているが、異なる機能、セマンティクス、または視覚効果を持つ一般的に使用されるHTML要素に取って代わります。次の基本的な例は、Vueコンポーネントをシンプルできれいに保つ際のこの要素の可能性を示しています。

ボタンまたはリンク？

ボタンとリンクはしばしば交換可能に使用されますが、機能、セマンティクス、さらにはビジュアルでさえ大きく異なります。一般的に言えば、ボタン（<button></button> ）現在のビューでの内部操作に使用され、JavaScriptコードにバインドされています。一方、リンク（<a></a> ）ホストサーバーのリソースであろうと外部リソースであろうと、別のリソースを指すことを目的としています。ほとんどの場合、それはWebページです。シングルページアプリケーションは、リンクよりもボタンに依存する傾向がありますが、どちらも必要です。

リンクは、ブートストラップの.btnクラスによって作成されたボタンのように、ボタンのように見えるように視覚的に設計されていることがよくあります。これを念頭に置いて、単一のプロップに従ってこれら2つの要素を切り替えるコンポーネントを簡単に作成できます。デフォルトでは、コンポーネントはボタンになりますが、 https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 propが適用され、リンクとしてレンダリングされます。

これはテンプレートにあります<component></component>：

<component :https: :is="element"><slot></slot></component>

このバインディングプロパティは、 elementという名前の計算されたプロパティを指し、バインディングhttps://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60プロパティは、適切に名前が付けられたものを使用します。 https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 prop。これは、Vueの通常の動作を利用します。つまり、Propに値がない場合、バウンドプロパティはレンダリングされたHTML要素に表示されません。最終要素がボタンであろうとリンクであろうと、スロットは内部コンテンツを提供します。

プロパティの計算は簡単です：

要素（） {
  this.https：//www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60？ 'A'： 'ボタン';
}

https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 propがある場合、アプリケーション<a></a>要素;それ以外の場合は1つを取得します<button></button>。

<my-button>これはボタンです</my-button>
<my-button https:>これはリンクです</my-button>

HTMLは次のように表示されます。

<button>これはボタンです</button>
<a https:>これはリンクです</a>

この場合、2つの要素が視覚的に類似していると予想されるかもしれませんが、セマンティックでアクセス可能なニーズでは明らかに異なります。つまり、2つの出力の要素は同じスタイルを持つ必要はありません。 Selector div.my-buttonをスタイルブロックに使用して要素を使用したり、要素に応じて変更される動的クラスを作成したりできます。

全体的な目標は、コンポーネントを必要に応じて2つの異なるHTML要素としてレンダリングできるようにすることにより、物事を簡素化することです - v-ifまたはv-else ！

注文または順序付けられていないリスト？

上記のボタン例と同様に、異なるリスト要素を出力するコンポーネントを作成できます。順序付けされていないリストと順序付けされたリストの両方が同じリスト項目を使用しているためです（<li> ）子供の要素としての要素なので、これは簡単に実装できます。交換するだけです<ul></ul>そして<ol></ol>。説明リストを使用することを選択したい場合でも<dl></dl>、これも実装するのが簡単です。なぜなら、コンテンツは容認できるものであるため<dt></dt>/<dd></dd>組み合わせたスロット。テンプレートコードは、ボタンの例に非常に似ています。

<component :is="element"><slot>リストアイテムはありません！</slot></component>

スロット要素内のデフォルトのコンテンツに注意してください。これについては後で説明します。

使用するリストタイプを指定する小道具がありますul

小道具：{
  listType：{
    タイプ：文字列、
    デフォルト：「UL」
  }
}

同様に、 elementと呼ばれる計算されたプロパティがあります。

要素（） {
  if（this。$ slots.default）{
    this.listtypeを返します。
  } それ以外 {
    「div」を返します。
  }
}

この場合、デフォルトのスロットが存在するかどうかをテストしています。つまり、レンダリングするコンテンツがあることを意味します。存在する場合は、 listType Propを通過したリストタイプを使用します。それ以外の場合、要素はなります<div>、これには「リストなし」が表示されます。スロット要素内のメッセージ。これにより、リスト項目がない場合、HTMLはアイテムなしで宣言されたアイテムが1つだけのリストとしてレンダリングされません。しかし、それはあなた次第ですが、明らかに有効なアイテムがなければリストのセマンティクスを考慮するのは素晴らしいことです。考慮すべきもう1つのことは、これがプロジェクトのないプロジェクト宣言が1つだけのリストであると考えるために、補助ツールを混乱させることができるということです。上記のボタンの例と同じように、各リストを異なるスタイルでスタイリングすることもできます。これにより、セレクターに基づいてクラス名<code>ul.my-listを持つ要素を見つけることができます。別のオプションは、選択した要素に基づいてクラス名を動的に変更することです。

この例は、BEMのようなクラスの命名構造に従います。

<component :class="`my-list ${element}`" :is="element"><slot>リストアイテムはありません！</slot></component>

使用法は、前のボタンの例と同じくらい簡単です。

<my-list><li>リスト項目1</li></my-list>
<my-list list-type="ol"><li>リスト項目1</li></my-list>
<my-list list-type="dl"><dt>アイテム1</dt>
<dd>これはアイテム1です。</dd></my-list>
<my-list></my-list>

各インスタンスは、指定されたリスト要素をレンダリングします。ただし、最後のインスタンスはaを生成します

、リスト項目がないことを宣言します。なぜなら、表示するリストはないからです！単純なHTMLになる場合がある場合、異なるリストタイプを切り替えるコンポーネントを作成したい理由を疑問に思うかもしれません。スタイリングと保守性の理由のためにコンポーネントにリストを含めるには多くの利点があるかもしれませんが、他の理由を考慮することができます。たとえば、何らかの形式の機能が別のリストタイプにバインドされている場合はどうなりますか？リストの並べ替えと切り替えを検討するかもしれません<ol></ol>ソートオーダーを表示してから、終了したら戻ってきましたか？

今、私たちは要素を制御しています

これらの2つの例が本質的にルート要素コンポーネントを変更している場合でも、コンポーネントをさらに深く入力することを検討してください。たとえば、タイトルは特定の条件に基づいている必要がある場合があります<h1></h1>に変更します<h3></h3>。

---

いくつかのプロパティが何であるかを制御するために三元演算子を使用しなければならないことに気付いた場合は、 v-ifに固執することをお勧めします。プロパティ、クラス、およびプロパティを処理するためのより多くのコードを作成すると、コードのみがv-ifよりも複雑になります。これらの場合、 v-if長期的にはコードをより簡単にしますが、よりシンプルなコードは読みやすくなり、メンテナンスが容易になります。

コンポーネントを作成する場合、要素を切り替えるための単純なv-ifがある場合は、VUEの主要な機能のこの小さな側面を考慮してください。

拡張アイデア、柔軟なカードシステム

これまでにカバーしてきたすべてを考えて、柔軟なカードコンポーネントに適用してください。このカードコンポーネントの例では、3つの異なるタイプのカードを記事レイアウトの特定の部分に配置できます。

<li> ヒーローカード：これはページの上部で使用される予定であり、他のカードよりも目を引くものです。 <li> Call to Action Card：記事内または記事内での一連のユーザーアクションとして使用されます。 <li> 情報カード：抜粋に使用。

これらは設計システムに従っていると考え、コンポーネントはセマンティクスとスタイリングのHTMLを制御します。

上記の例では、上部にヒーローカードが表示され、その後の一連のアクションカードが続き、その後、少し押し下げて、右側にメッセージカードが表示されます。

カードコンポーネントのテンプレートコードは次のとおりです。

<component :class="`card ${type}`" :is="elements('root')">
  <component :style="bg()" :is="elements('header')">
    <slot name="header"></slot>
  </component>
  <div>
    <slot name="content"></slot>
  </div>
  <component :is="elements('footer')">
    <slot name="footer"></slot>
  </component>
</component>

カードには3つの「コンポーネント」要素があります。各要素はカード内の特定の要素を表しますが、カードタイプに応じて変更されます。各コンポーネントは、コールカードの一部を識別するパラメーターを使用してelements()メソッドを呼び出します。

elements()メソッドは次のとおりです。

要素（それ）{
  const tags = {
    ヒーロー：{root： 'section'、header： 'h1'、footer： 'date'}、
    cta：{root： 'section'、header： 'h2'、footer： 'div'}、
    情報：{root： 'adase'、header： 'h3'、footer： 'small'}
  }
  return tags [this.type] [which];
}

これに対処するには多くの方法があるかもしれませんが、コンポーネントのニーズに合った方向に移動する必要があります。この場合、各カードタイプの各部分のHTML要素タグを追跡するオブジェクトがあります。次に、このメソッドは、現在のカードタイプと渡されたパラメーターに基づいて、必要なHTML要素を返します。

スタイルについては、カードのタイプに基づいたカードのルート要素にクラスを挿入しました。これにより、必要に応じて各タイプのCSSを簡単に作成できます。 HTML要素自体に基づいてCSSを作成することもできますが、クラスが好きです。カードコンポーネントの将来の変更により、HTML構造が変更される可能性があり、クラスの作成ロジックを変更することはほとんどありません。

このカードは、ヒーローカードのタイトルの背景画像もサポートしています。これは、タイトル要素に単純な計算属性bg配置することによって行われます。これが計算された属性です：

 bg（）{
  this.backgroundを返しますか？ `background-image：url（$ {this.background}）`：null;
}

画像URLがbackgroundプロップで提供されている場合、計算されたプロパティは、画像を背景画像として適用するインラインスタイルの文字列を返します。簡単にそれをより強力にすることができるかなりシンプルなソリューション。たとえば、カスタムカラー、グラデーション、またはデフォルトの色をサポートできます（画像が提供されていない場合）。各カードタイプには、開発者が活用するための独自のオプションの小道具がある可能性があるため、この例には多くの可能性は含まれません。

これがこのデモのヒーローカードです：

<custom-card background="https://picsum.photos/id/237/800/200" type="hero">
  <template v-slot:header>記事タイトル</template>
  <template v-slot:content>ロレム・イプスム...</template>
  <template v-slot:footer>2011年1月1日</template>
</custom-card>

カードの各セクションには独自のコンテンツスロットがあることがわかります。そして、簡単にするために、テキストはスロットで期待される唯一のものです。カードコンポーネントは、カードタイプに応じて必要なHTML要素を処理します。コンポーネントを作成すると、コンポーネントを使用してテキストのみが非常に簡単になります。 HTML構造について決定を下す必要性を置き換え、カードの実装を簡素化します。

比較のために、デモで使用される他の2つのタイプを次に示します。

<custom-card type="cta">
  <template v-slot:header>CTAタイトル1</template>
  <template v-slot:content>Lorem Ipsum dolor sit amet、consceTur Apiscing Elit。</template>
  <template v-slot:footer>フッター</template>
</custom-card>
<custom-card type="info">
  <template v-slot:header>これが引用です</template>
  <template v-slot:content>「Maecenas ... Quis。」</template>
  <template v-slot:footer>誰がそれを言った</template>
</custom-card>

繰り返しますが、各カードタイプはelements()メソッドの定義に従って独自のHTML要素を生成するため、各スロットはテキストのみを期待することに注意してください。将来、異なるHTML要素を使用する必要があると考える場合は、コンポーネントを更新するだけです。アクセシビリティ機能の構築は、もう1つの潜在的な将来の更新です。相互作用機能は、カードの種類に基づいて拡張することもできます。

コンポーネント内のコンポーネントのパワー

Vueコンポーネントで奇妙に名前が付けられました<component></component>元々は1つのことのために設計されていましたが、頻繁に起こるように、他の方法で非常に役立つ小さな副作用があります。<component></component>要素は、必要に応じて別のコンポーネント内にVUEコンポーネントを動的に切り替えるように設計されています。これに関する基本的なアイデアは、ページとして機能するコンポーネントを切り替えるためのタブシステムかもしれません。これは、実際にはVueドキュメントで説明されています。ただし、HTML要素に対して同じことをサポートしています。

これは、友人が共有する新しいテクノロジーの例です。これは、私が使用したVUE機能の驚くほど便利なツールになりました。この投稿があなたにこの小さな機能に関するアイデアと情報を伝え、あなた自身のVueプロジェクトでそれを活用する方法を探求できることを願っています。