Vue slot is the specific use

The use of slots

The use of slots is actually very simple
first thing to understand is the use of slots in the sub-assembly

Code:

<div id="app">
    <div class="father">
        <H3> Here is the parent element </ h3>
        <child>
            <Span> Menu 1 </ span>
            <Span> Menu 2 </ span>
            <Span> Menu 3 </ span>
        </child>
    </div>
</div>
<template id="child">
    <div class="child">
        <H3> Here is the sub-assembly </ h3>
        <slot></slot>
    </div>
</template>
<script>
    There vm = new Vue ({
        on: '#app' ,
        data: {},
        components: {
            child: {
                template: '#child'
            }
        }

    });

</script>

 

 

Named Slot

Adding a slot named is actually the parent component slot='自定义名字' of the property,
and then in the sub-assembly <slot><slot> which added name='自定义名字' to
if there is no part of the parent component added in slot property, then here is 默认的插槽 , in the sub-assembly <slot></slot> is directly used by the parent component the default socket part

 

Code:

<div id="app">
    <div class="father">
        <H3> Here is the parent element </ h3>
        <child>
            <span slot="demo1">菜单1</span>
            <Span> Menu 2 </ span>
            <span slot="demo3">菜单3</span>
        </child>
    </div>
</div>
<template id="child">
    <div class="child">
        <H3> Here is the sub-assembly </ h3>
        <slot></slot>
        <slot name="demo3"><slot>
    </div>
</template>
<script>
    There vm = new Vue ({
        on: '#app' ,
        data: {},
        components: {
            child: {
                template: '#child'
            }
        }
    });
</script>

 

Scope slot

Everything parent component template will compile the parent role in the region; all things sub-components within the template will be compiled in the child role.
However, we can use in the parent component slot-scope properties acquired from the sub-assembly data
provided is required to use in the sub-assembly :data=data to transfer data data

<div id="app">
    <div class="father">
        <H3> Here is the parent element </ h3>
        <child>
            <div slot-scope="user">
                {{user.data}}
            </div>
        </child>
    </div>
</div>
<script>
    Vue.component('child', {
        template:'' +
            '<div class="child">\n' +
            '<H3> Here is the sub-assembly </ h3> \ n' +
            '    <slot  :data="data"></slot>\n' +
            '  </div>',
        data: function () {
            return {
                Data: [ 'zhangsan', 'Lisi', 'wanwu', 'zhaoliu', 'Tianqi', 'xiaoba' ]
            }
        }
    });
    There vm = new Vue ({
        on: '#app' ,
    });
</script>