vue组件插槽

1.组件插槽的作用

父组件向子组件传递内容

2.组件插槽基本用法

（1）插槽位置

Vue.component('alert-box', {

template:`

<div class = "demop-alert-box">

    <strong>tip:</strong>

    <slot></slot>

</div>`

})

（2）插槽内容

<alert-box>hello world!</alert-box>

浏览器显示内容为：tip: hello world!

ps:'<slot></slot>'中也可以写内容，如果父组件<alert-box><alert-box>中有内容则不会显示，没有即显示

3.具名插槽的用法

（1）插槽定义

子组件：

<div class="container">

     <header>

           <slot name="header"></slot>

     </header>

     <main>

           <slot></slot>

     </main>

     <footer>

          <slot name="footer"></slot>

     </footer>

</div>

（2）插槽内容

父组件：

<base-layout>

     <h1 slot="header"></h1>

     <p>主要内容1</p>

     <p>主要内容2</p>

     <p slot="footer">底部内容1</p>

</base-layout>

会根据name进行匹配，没有匹配到的内容会放在默认的插槽中。插槽中若想使用多个标签，则可使用template标签包裹

浏览器运行后：

4.作用域插槽

应用场景：父组件可以对子组件的内容进行加工处理

（1）插槽定义

子组件：

<ul>

     <li v-for="item in list" key="item.id">

          <slot :item="item">{{item.name}}</slot>

     </li>

</ul>

（2）插槽内容

父组件：,

<fruit-list :list="list">

     <template slot-scope="slotProps'>

          <strong v-if="slotProps.item.current">{{soltProps.item.text}}</strong>

     </template>

</fruit-list>

slot-scope可以获得子组件中绑定的属性:item="item"，获取子组件中的数据