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",获取子组件中的数据