Vue のスロットを使用して親コンポーネントを配布する方法

今回は、Vue でスロットスロットを使用して親コンポーネントを配布する方法と、Vue でスロットスロットを使用して親コンポーネントを配布する場合の注意事項について説明します。以下は実際的なケースです。一見。

前に書いています

私は以前、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 サイトの他の関連記事にも注目してください。

推奨読書:

Vue.js でのリスナーのユースケース分析

Vue SSR コンポーネントの読み込みの使用方法

🎜

以上がVue のスロットを使用して親コンポーネントを配布する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。