14-组件化高级-具名插槽

最新推荐文章于 2024-06-08 15:58:35 发布

蓝带915

最新推荐文章于 2024-06-08 15:58:35 发布

阅读量291

点赞数 1

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_42647711/article/details/108447592

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

什么是具名插槽

当子组件需要使用多个插槽时，可以利用slot元素的name属性来定义具名插槽，方便父组件使用时辨识，具体看看怎么使用大家就知道啦。

具名插槽的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
   	  <cpn><span>标题</span></cpn><br> 
      <cpn>
        <span slot="left">导航占用左边的位置</span>
        <span slot="center">标题占用中间的位置</<span>
      </cpn>
      <br />
      <cpn><span slot="left">修改左边的占位</span></cpn>
      <br />
      <cpn><button slot="right">修改右边占位</button></cpn>
    </div>

    <template id="cpn">
      <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
      </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        components: {
          cpn: {
            template: "#cpn",
          },
        },
      })
    </script>
  </body>
</html>

此时子组件已经定义了具保插槽，如果父组件使用时没有带上slot属性，则默认无法覆盖子组件的插槽，此时相当于父组件没有使用插槽功能，所以子组件显示默认数据。如图所示：

<cpn><span>标题</span></cpn>

在这里插入图片描述

如果父组件使用时定义了slot属性绑定了子组件中的name属性，则两属性一一对应，即可实现目标替换。如图所示：

<cpn>
  <span slot="left">导航占用左边的位置</span>
  <span slot="center">标题占用中间的位置</<span>
</cpn>

在这里插入图片描述

<cpn><span slot="left">修改左边的占位</span></cpn>

在这里插入图片描述

具名插槽的应用场景

比如我们在做一个导航栏组件时，分为左中右三部分，且想到独立，不受影响，即可使用具名插槽。
在这里插入图片描述

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录