Detailed explanation of the convenient steps for reusing content in slot distribution in Vue

This time I will bring you a detailed explanation of the steps to facilitate the reuse of the content of the parent component distributed by the slot slot in Vue. What are the precautions? The following is a practical case, let’s take a look.

Written before

I have previously written an article about Vue’s implementation of the dialog box component http://www.jb51.net /article/139218.htm

talked about how to implement a vue dialog component, which involves the communication between the parent component and the child component. Needless to say, this can be understood by reading my previous article. The article also said at the end Now, we can use slot slots to write components. Slots are used to distribute content to sub-components, thereby achieving a high degree of reuse of components and making the components written more flexible.

Still using the example of a dialog box, use slot to implement the dialog component

Register a global component named dialog-tip

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

Use the templet tag to define this component

<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>

The component content includes two parts, one is the prompt content, and the other is the button button. We will use slot to include the content to be modified and replaced,
so that the parent component can distribute the content to the child component.

<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>

In addition to the default slots, you can also define named slots. If there are several parts of the component that need to be replaced, we can define a name for it, for example:

&lt ;slot name="msg">Please enter any integer between 1-8000</slot>

In this way, when using the component, specify the name of the slot, and this part of the content will be Replace it without replacing other slot contents

<p slot="msg">Please enter the correct mobile phone number</p>

Use the defined dialog component

<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>

If you do not specify the name of the slot, the content in the default dialog-tip tag will replace the content contained in the sub-component using slot, for example, the above

Use slot Specify its name to replace the corresponding slot part in the subcomponent, and content that does not use slot to specify the name will by default replace the part of the subcomponent that
does not define a named slot.

It should be noted that if the content that needs to be distributed is not defined in the dialog-tip tag, the default slot content will be displayed in the sub-component

For more slot usage, please move Stephttps://cn.vuejs.org/v2/guide/components-slots.html

Final

Rendering

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement full-screen scrolling plug-in in ES6

Summary of how to use nodejs log module winston

The above is the detailed content of Detailed explanation of the convenient steps for reusing content in slot distribution in Vue. For more information, please follow other related articles on the PHP Chinese website!