Vue基础(十一)插槽分块

最新推荐文章于 2023-12-08 09:54:23 发布

夜刀神十三香

最新推荐文章于 2023-12-08 09:54:23 发布

阅读量448

点赞数

CC 4.0 BY-SA版权

分类专栏：记录笔记学习笔记简单实例文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_44990139/article/details/95864138

笔记同时被 3 个专栏收录

65 篇文章

订阅专栏

学习笔记

65 篇文章

订阅专栏

记录

64 篇文章

订阅专栏

博客介绍了Vue中插槽的好处，使用插槽可将页面分成多个模块，实现多人协作完成同一页面，代码可重复利用，耦合度低、效率高。还提到Vue的sold方法已废弃，推荐使用2.6.0新增的v-slot，其用法与sold相近但写法有差别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽的好处

有了插槽,可以将一个页面分成好多模块去写,这样就就可以实现多人完成同一页面,且可重复利用,代码耦合度更低,效率更高

<body>
    <div id="app">
        <child-one>
                <template slot="top">
                        <h1>这是头部信息</h1>
                    </template>
                    <template slot="left">
                            <a href="#">百度菜单</a>
                    </template>
                    <template slot="main">
                               <h1>这是内容信息</h1>
                    </template>
        </child-one>
        
    </div>



    <script>
    Vue.component("child-one",{
        props:{

        },
        template:`
        <div style="border: 1px solid rgb(31, 21, 21)">
                        <div style="border: 1px solid blue;height: 100px;">
                            <slot name="top">top</slot>
                        </div>
                        <div style="border: 1px solid orange;float: left;width: 20%;height:500px">
                            <slot name="left">left</slot>
                        </div>
                        <div style="border: 1px solid black;float: right;width: 75%;height:500px">
                            <slot name="main">main</slot>
                        </div>
                    </div>
        `
    })
    let app=new Vue({
        el:"#app",
        data:{

        }

    })
    </script>

</body>

在VUE 的api文档中,显示sold方法已废弃,推荐使用 2.6.0 新增的 v-slot。用法和sold差不多.,写法有点差别

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>