vue——16-slot 匿名插槽和实名插槽

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82762718

匿名插槽

<div id="enjoy">
    <my-slot>
        <img src="../images/fashion-001.jpg" alt="" width="100">
        <img src="../images/fashion-003.jpg" alt="" width="100">
        <h4>hello</h4>
    </my-slot>
</div>

<template id="my_slot">
<div id="panel">
    <h2 class="panel-header">插槽的头部</h2>
    <!--预留一个插槽-->
    <!--slot可以代替任何一个标签，里面可以放任意个标签，默认显示提示的内容-->
    <slot>可以代替任何一个标签，默认显示提示的内容</slot>
    <footer>插槽的底部</footer>
</div>
</template>

		{
            Vue.component('my-slot',{
                template:"#my_slot"
            });
            
            new Vue({
                el:'#enjoy',
            })
        }

实名插槽

<div id="enjoy">
    <my-computer>
        <!--slot固定了位置，不会随意改变-->
        <div slot="cpu">inter core i8</div>
        <img slot="hard-drive" src="../images/fashion-001.jpg" width="100" style="display: block;">
        <h2 slot="gpu">hello world</h2>
        <a href="#" slot="memory">hello world</a>
    </my-computer>
</div>

<template id="my_computer">
    <div id="main">
        <slot name="cpu">这里是插CPU的</slot>
        <slot name="gpu">这里是插gpu的</slot>
        <slot name="memory">这里是插内存条的</slot>
        <slot name="hard-drive">这里是插硬盘的</slot>
    </div>
</template>

        {
            Vue.component('my-computer',{
                template:'#my_computer'
            });

            new Vue({
                el:'#enjoy',
            })
        }