How to use slots in Vue to distribute parent components-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use slots in Vue to distribute parent components

Jun 01, 2018 pm 01:48 PM

slot distribution slot

This time I will show you how to use the slot slot in Vue to distribute the parent component, and what are the things to note . Here 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

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

Copy after login

Use the templet tag to define this component

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

Copy after login

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.

&lt;p class=&quot;dialog_tip--contenttxt&quot;&gt;
     &lt;slot name=&quot;msg&quot;&gt;请输入1-8000之间任意整数&lt;/slot&gt;
    &lt;/p&gt;
    &lt;p class=&quot;dialog_tip--contentbtns&quot;&gt;
     &lt;slot&gt;
      &lt;button class=&quot;btn&quot;&gt;确定&lt;/button&gt;
      &lt;button class=&quot;btn&quot;&gt;重新输入&lt;/button&gt;
      &lt;button class=&quot;btn&quot;&gt;去注册&lt;/button&gt;
     &lt;/slot&gt;
    &lt;/p&gt;

Copy after login

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

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

Copy after login

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 Step

https://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!