1.前言
插槽其实很简单 ,只是平常可能用的少,觉得比较陌生
用一个大家比较熟悉的例子入手
2. why
元素作为承载分发内容的出口。
<message-box>消息框</message-box>
使用组件的时候,标签之间的内容是不显示的
如果想让内容显示出来,就需要 用
slot,这也是官方文档说slot作为承载 分发内容出口的意思,
3. 语法
<div class="message-box" v-if="show"> <slot> </slot> </div>
slot的位置就是 使用组件时候 标签直接的内容
4. 默认插槽 匿名插槽
需求:
- 点击右侧的X可以关闭
2.内容可以有使用者来指定
<template> <!-- 默认插槽 --> <div class="message-box" v-if="show"> <slot> </slot> <span class="message-box-close" @click="$emit('update:show',false)">X</span> </div> </template> <script> export default { props: ["show"], }; </script> <style lang="less" scoped> .message-box { padding: 10px 20px; background-color: #19be6b; border-radius: 10px 10px; } .message-box-close { float: right; } </style>
5. 使用
sync 修饰符 展开 等价于 @update:show=""
<message-Box :show.sync="showMsgView">警告</message-Box>
6. 具名插槽
顾名思义 根据名字来定位的插槽
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中
![J12H6UWTT]YDOO@HAQE1_S3.png](https://ucc.alicdn.com/pic/developer-ecology/356a9be4bf6d4f4ab46838c96f2fd722.png?x-oss-process=image/resize,w_1400/format,webp "J12H6UWTT]YDOO@HAQE1_S3.png")
模板
<div class="message-box" v-if="show"> <slot name="title"> 默认标题</slot> <slot></slot> <span class="message-box-close" @click="$emit('update:show', false)" >X</span> </div>
使用
<message-Box :show.sync="showMsgView"> <!-- 命名为title插槽内容 --> <template v-slot:title> <!-- msg默认是 当前根据组件里面的数据 --> <h1> 温馨提示 -{{msg}}</h1> </template> <!-- 默认插槽 v-slot:default--> <template> 真帅 </template> </message-Box>
7. 作用域插槽
模板
使用
8. 优化动画
<transition name="fade"> <div class="message-box" v-if="show"> <!-- title="来子组件自己的标题" --> <slot name="title" title="我是子组件的哦"> 默认标题</slot> <slot></slot> <span class="message-box-close" @click="$emit('update:show', false)" >X</span > </div> </transition>
.fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: all 2s; }
9 具名插槽练习名片
<div id="app"> <name-Card> <p>186XXX8753</p> <span slot="name">yzs</span> <h1 slot="tel">18603XXX753</h1> <template slot="address">河南郑州XX区XXX</template> <p>这是没有 slot指令 的 标签内容: 我们叫 匿名插槽 没有指定slot属性的 内容会被显示在 匿名 slot中 如果组件没有 匿名 slot 这部分内容就丢弃 不显示 </p> </name-Card> </div> <script src="./vue.js"></script> <script type="text/html" id="name-card"> <div> <!-- 匿名插槽 没有 name属性 --> <!-- <slot> </slot> --> <h3>姓名: <slot name="name"> </slot> </h3> <p>电话: <slot name="tel"> </slot> </p> <p>家庭住址: <slot name="address"> </slot> </p> </div> </script> <script> var nameCard = { template:"#name-card" } new Vue({ el:"#app", components:{ nameCard } }) </script>
