Vueのスロット配信でコンテンツを再利用する便利な手順を詳しく解説

今回は、Vueのslotスロットで配布された親コンポーネントの内容を再利用しやすくするための手順を詳しく解説します 親のスロット配布で簡単に再利用できる注意事項とは何ですか？ Vue のコンポーネント 以下は実際のケースです。1 立ち上がって見てください。

前に書いています

私は以前、Vue によるダイアログ ボックス コンポーネントの実装に関する記事を書きました http://www.jb51.net/article/139218.htm

Vue ダイアログ ボックス コンポーネントの実装方法についての話言うまでもなく、これは私の前回の記事を読めば理解できると思いますが、この記事の最後で述べたように、スロットはコンポーネントを記述するために使用でき、スロットはコンテンツを配布するために使用されます。これにより、コンポーネントの高度な再利用が実現され、作成されたコンポーネントがより柔軟になります。

引き続きダイアログ ボックスの例を使用し、スロットを使用してダイアログ コンポーネントを実装します

dialog-tip という名前のグローバル コンポーネントを登録します

 Vue.component('dialog-tip', {
   template: '#dialog-tip',
   props:['dialogShow','message'],
   data:function(){
    return {
     content:''
    }
   },
   methods:{
   }
  });

テンプレート タグを使用してこのコンポーネントを定義します

<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>
<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>

コンポーネントのコンテンツには 2 つの部分が含まれています。プロンプトコンテンツ、1 つはボタンです。スロットを使用して、変更および置換されるコンテンツを含めます。
これにより、親コンポーネントが子コンポーネントにコンテンツを配布できるようになります。

<p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>

デフォルトのスロットに加えて、置き換える必要があるコンポーネントの部分がいくつかある場合は、その名前を定義することもできます。

<slot name="msg"&gt ;1 ～ 8000 の任意の整数を入力してください</slot><slot name="msg">请输入1-8000之间任意整数</slot>

这样在使用组件的时候，指定slot的name ，就会将这一部分内容替换掉，而不会替换其他的插槽内容

<p slot="msg">请输入正确手机号</p>

このように、コンポーネントを使用するときにスロットの名前を指定すると、コンテンツのこの部分が置き換えられます他のスロットの代わりにコンテンツ

<p slot="msg">正しい携帯電話番号を入力してください</p>

定義されたダイアログ コンポーネントを使用してください

<dialog-tip message="hello" :dialog-show="dialogShow.tip3">
   <p slot="msg">请输入正确手机号</p>
   <button class="btn" @click="closeDialogTip(&#39;tip3&#39;)">确定</button>
  </dialog-tip>
  <dialog-tip message="hello" :dialog-show="dialogShow.tip4">
   <p slot="msg">抱歉，没有此用户，请核实后输入</p>
   <button class="btn" @click="closeDialogTip(&#39;tip4&#39;)">重新输入</button>
   <button class="btn" @click="reg">去注册</button>
  </dialog-tip>

スロットの名前を指定します。デフォルトのダイアログです。 -tip タグ内のコンテンツは、slot を使用してサブコンポーネントに含まれるコンテンツ部分を置き換えます。たとえば、上記の

では、slot を使用してその名前を指定し、対応するスロット部分を置き換えます。サブコンポーネント内で、名前の指定にスロットを使用しないコンテンツは、デフォルトで名前付きスロットを定義していないサブコンポーネントの部分を置き換えます。

配布する必要があるコンテンツがダイアログチップタグで定義されていない場合、デフォルトのスロットコンテンツがサブコンポーネントに表示されることに注意してくださいスロットの使用量をさらに詳しくするには、

https: //

cn .vuejs.org/v2/guide/components-slots.html

Final

Rendering

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:
ES6 で全画面スクロール プラグインを実装する手順の詳細な説明

nodejs ログ モジュール winston の使用方法の概要

🎜🎜

以上がVueのスロット配信でコンテンツを再利用する便利な手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。