vue slot用法

2017-07-31  本文已影响0人  tobyDing

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>
上一篇 下一篇

猜你喜欢

热点阅读