vue slot用法

slot---类似ng里面 transclude (指令)
位置、槽口
作用: 占个位置,将模板中正常html内容放到slot中,,若无html,会显示slot的内容
用法:
(1)单个占位
<div id="box">
<aaa>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</aaa>



<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot>这是默认的情况</slot>
<p>welcome vue</p>
</template>

     (2)多个占位---需要命名区分
         <div id="box">
            <aaa>
                <ul slot="ul-slot">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
                <ol slot="ol-slot">
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ol>
            </aaa>
            <hr>
            <aaa>
            </aaa>
         </div>
         <template id="aaa">
            <h1>xxxx</h1>
            <slot name="ol-slot">这是默认的情况</slot>
            <p>welcome vue</p>
            <slot name="ul-slot">这是默认的情况2</slot>
         </template>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容