8.1.2 插槽slot的具名使用——第8章 Vue组件进阶

最新推荐文章于 2022-06-07 17:13:16 发布

gongyin2013

最新推荐文章于 2022-06-07 17:13:16 发布

阅读量157

点赞数

分类专栏：抹平Vue学习曲线文章标签： vue

本文链接：https://blog.csdn.net/gongyin2013/article/details/106550436

版权

抹平Vue学习曲线专栏收录该内容

12 篇文章 2 订阅

订阅专栏

8.1.2 插槽slot的具名使用

8.1.1节讲的插槽是没有命名，叫匿名插槽。如果给插槽起个名字，就叫具名插槽。具名插槽比较实用，就像宾馆的房间号，没有房间号的宾馆，大家只能滚大铺了：），看一下用法：

<body>

<!-- 父组件模板 -->

<div id="app">

      <comp><span slot="room001">老总得到插槽是room001</span></comp>

      <comp><span slot="room002">主管得到插槽是room002</span></comp>

      <comp><span slot="room003">秘书得到插槽是room003</span></comp>



      <comp><p>员工张三没有房间号</p></comp>

      <comp><p>司机李四没有房间号</p></comp>

</div>

<template id="comp">
    <div>
        <h2>我是固定部分</h2>
        
        <slot name="room001"></slot>
        <slot name="room002"></slot>
        <slot name="room003"></slot>
        
        <slot ></slot>
    </div>
</template>
<script src="../static/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"我是父Vue实例"
        },
        components:{
            comp:{
                template:"#comp"
            }
        }
    })
</script>
</body>

看上面的代码注释，用法一目了然，再通过图8.1-2加深一下理解：

图8.1-2

形象地描述一下：父组件携带了一个名为a的slot家伙，插入到子组件<slot></slot>之间。

----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------