slot-插槽的基本使用-具名插槽的使用（重要）

最新推荐文章于 2024-05-28 17:25:55 发布

Eli-sun

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量1.7k

点赞数 1

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106869163

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

slot-插槽的基本使用-具名插槽的使用

为什么使用slot ？

slot翻译为插槽：

1.在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
2.插槽的目的是让我们原来的设备具有更多的扩展性。
3.比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：

1.最暗的插槽也是为了让我们封装的组件更加具有扩展性。
2.让使用者可以决定组件内部的一些内容到底展示什么。

栗子：移动网站中的导航栏：

1.移动开发中几乎每个页面都有导航栏。
2.导航栏我们必然会封装成一个插件，比如nav-bar组件。
3.一旦有了这个组件，我们就可以在多个页面中复用了。

如何封装这类组件呢？ slot

1.它们有很多区别，但是也有很多共性。
2.如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容就要我们重复去封装。
3.但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些是中间搜索，有些是文字等等。

如何封装何时呢？抽取共性，保留不同

1.最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
2.一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
3.是搜索框，还是文字，还是菜单，由调用者自己来决定。

1.插槽的基本使用：< slot >< /slot >
2.插槽的默认值： < slot > button </ slot >
3.如果有多个值，同时放入到组件中替换时，一起作为替换元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn><span>hello</span></cpn>
  <cpn><i>hi</i></cpn>
  <cpn><button>OK</button></cpn>
  <cpn>
    <span>Emma</span>
    <p>我是p</p>
    <div>我是div</div>
  </cpn>
  <cpn></cpn>
  <cpn></cpn>

</div>

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件，哈哈哈哈</p>
    <slot><button>按钮</button></slot>
    <!--<button>按钮</button>-->
  </div>
</template>

<script src="../../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      cpn:{
        template:'#cpn',
      }

    }
  })
</script>
</body>
</html>

具名插槽

给插槽添加name

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <cpn>
    <span slot="left">gg</span>
    <span slot="center">标题</span>
    <span>右边</span>
    <span>哈哈哈</span>
  </cpn>



</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><button>取消</button></slot>
    <slot><button>按钮</button></slot>
  </div>
</template>

<script src="../../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      cpn:{
        template:'#cpn',

      }
    }
  })
</script>
</body>
</html>

Eli-sun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot-插槽的基本使用-具名插槽的使用（重要）

slot-插槽的基本使用-具名插槽的使用为什么使用slot ？slot翻译为插槽：1.在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。2.插槽的目的是让我们原来的设备具有更多的扩展性。3.比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽：1.最暗的插槽也是为了让我们封装的组件更加具有扩展性。2.让使用者可以决定组件内部的一些内容到底展示什么。栗子：移动网站中的导航栏：1.移动开发中几乎每个页面都有导航栏。2.导航栏我们必然会封装成一个插件，
复制链接

扫一扫