Vue combines slot slot to distribute parent component content to achieve highly reused and more flexible components

write in front

I wrote an article about vue's implementation of the dialog dialog box component http://www.cnblogs.com/fozero/p/8546883.html , which
talked about how to implement a vue dialog box component, which involves the parent component and child component. Communication, needless to say, you can understand it by reading my previous article. The article also mentioned at the end that we can use
slot slots to write components, and slots are used to distribute content to subcomponents, so as to achieve a high degree of reuse of components, Written components are more flexible.

Or combined with the example of the dialog, 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 templete tag to define this component

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

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

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

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

<slot name="msg">请输入1-8000之间任意整数</slot>

In this way, when using the component, specifying the name of the slot will replace this part of the content without replacing other slot content

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

Use the defined dialog component

<dialog-tip message="hello" :dialog-show="dialogShow.tip3">
            <p slot="msg">请输入正确手机号</p>
            <button class="btn" @click="closeDialogTip('tip3')">确定</button>
        </dialog-tip>
        <dialog-tip message="hello" :dialog-show="dialogShow.tip4">
            <p slot="msg">抱歉，没有此用户，请核实后输入</p>
            <button class="btn" @click="closeDialogTip('tip4')">重新输入</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 slot in the subcomponent, such as the above

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

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

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

finally

renderings

Author: fozero
Statement: Original article, please indicate the source for reprinting, thank you! http://www.cnblogs.com/fozero/p/8974597.html
Tags: vue, slot