十一、Vue插槽

最新推荐文章于 2024-05-10 11:01:39 发布

不会Java怎么找女朋友

最新推荐文章于 2024-05-10 11:01:39 发布

阅读量147

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lin_willen/article/details/112503233

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-slot-插槽的基本使用

1.1 为什么使用slot

（一）slot翻译为插槽

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

（二）组件的插槽

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

（三）例子：移动网站中的导航栏

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

1.2 如何封装这类插件呢？slot

（一）如何去封装这类的组件呢？

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

（二）如何封装合适呢？抽取共性，保留不同

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

（三）这就是使用slot的意义所在

1.3 实战代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-slot-插槽的基本使用</title>
</head>
<body>

<div id="app">
  <cpn>
    <button>按钮</button>
  </cpn>
  <hr>
  <cpn>
    <i>呵呵呵</i>
    <div>我是DIV元素</div>
    <p>我是段落</p>
  </cpn>
  <hr>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是key</h2>
    <p>我是内容</p>
    <!--在这里定义了一个插槽-->
    <slot></slot>
  </div>
</template>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>
</body>
</html>

1.4 运行结果

在这里插入图片描述

02-slot-具名插槽的使用

2.1 具名插槽

具名插槽顾名思义就是给插槽定义一个名字，让将插入插槽的标签或文本可以选择自己要插入哪个位置

2.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-slot-具名插槽的使用</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <hr>
  <cpn>
    <!--取名name 调用slot-->
    <span slot="center">标题</span>
    <span slot="left">返回</span>
    <span slot="right">更多</span>
  </cpn>
</div>
<template id="cpn">
  <div>
    <!--slot中间均是默认值-->
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>
</body>
</html>

2.3 运行结果

在这里插入图片描述

03-编译作用域

3.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-编译作用域</title>
</head>
<body>

<div id="app">
  <!--这个isShow是Vue实例中的isShow-->
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是子组件内容，hhh</p>
    <!--这个isShow是子组件cpn中的isShow-->
    <button v-show="isShow">按钮</button>
  </div>
</template>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isShow: true
    },
    components:{
      cpn: {
        template: '#cpn',
        data(){
          return{
            isShow: false
          }
        }
      }
    }
  })
</script>
</body>
</html>

3.2 运行结果

在这里插入图片描述

04-作用域插槽

4.1 知识预备

（一）作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰
（二）这里，我们用一句话对其做一个总结：然后我们在后续的案例中来体会

父组件替换子组件插槽内显示的标签，但是数据内容由子组件来提供

（三）我们先提一个需求

子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]
需要在多个页面进行展示
- 某些页面是以水平方向一一展示的
- 某些界面是以列表形式展示的
- 某些界面直接展开一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
- 利用slot作用域插槽就可以了

4.2 作用域插槽：使用

（一）在父组件使用我们子组件时，从子组件中拿到数据

我们通过获取到slot的属性
在通过slot.data就可以获取到我们传入的data了

4.3 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-作用域插槽</title>
</head>
<body>

<div id="app">
  <!--默认列表形式展示-->
  <cpn></cpn>

  <!--水平形式展示-->
  <cpn>
    <!--目的是获得子组件中的pLanguages-->
    <!--Vue2.5.x以下必须使用template模板-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{{item}}——</span>
      <br>-->
      <span>{{slot.data1.join('——')}}</span>
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <!--这个data1随便起-->
    <slot :data1="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    components:{
      cpn:{
        template:"#cpn",
        data(){
          return{
            pLanguages:['JavaScript','C++','Java','Python','Go','Solidity']
          }
        }
      },
    }
  })
</script>
</body>
</html>