vue 组件化开发 slot插槽使用

2021年2月8日 0条评论 200次阅读 0人点赞

[toc]

slot是什么

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

《vue 组件化开发 slot插槽使用》

slot基本使用

在template模板中使用<slot></slot>来使用插槽

具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
- 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
- 这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
- 非常简单，只要给slot元素一个name属性即可<slot name='myslot'></slot>

作用域插槽

==父组件替换插槽的标签，但是内容由子组件来提供。==

插槽使用实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h3>使用默认插槽的值</h3>
  <cpn></cpn>

  <h3>修改name为left的插槽</h3>
  <cpn>
    <button slot="left">返回</button>
  </cpn>

  <h3>自定义全部插槽的值</h3>
  <cpn>
    <button slot="left">返回</button>
    <sapn slot="centre">我是中间的搜索框</sapn>
    <button slot="right">右侧</button>
  </cpn>

  <p>------------------------------------------------------------------------------------------------------------------</p>

  <h2>概念: 父组件替换插槽的标签，但是内容由子组件来提供</h2>
  <h3>使用模板默认标签</h3>
  <cpn2></cpn2>

  <h3>修改模板中的标签</h3>
  <cpn2>
    <!--这里的template也可以写成div, slot-scope是固定语法,目的是引用(绑定)slot对象, -->
    <template slot-scope="slot">
      <!--slot.data中的data是引用模板中:data, 而:data和模板中的pLanguages是绑定的,所以访问slot.data就可以访问到模板中的pLanguages-->
      <!--通过for循环对列表进行遍历,通过-分割,但是最后的地方也会多出一个- -->
      <span v-for="item in slot.data">{{item}}-</span>
      <br>
      <!--通过.join函数对列表中的元素进行拼接,分隔符是 * -->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn2>
</div>

<template id="cpn">
  <div>
    <!--包含name属性的插槽,叫做具名插槽-->
    <slot name="left"><span>左侧</span></slot>
    <slot name="centre"><span>中间</span></slot>
    <slot name="right"><span>右侧</span></slot>
  </div>
</template>

<template id="cpn2">
  <div>
    <!--data名称是自定义的,可以修改为其他的任意值, pLanguages表示从组件中拿到的数据, 相当于pLanguages和data进行绑定-->
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../../js/vue.v2.6.12.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'baiyongjie'
    },
    components: {
      cpn: {
        template: "#cpn",
      },
      cpn2: {
        template: "#cpn2",
        data() {
          return {
            pLanguages: ['python', 'javaScript', 'Golang', 'vue']
          }
        }
      }
    }
  })
</script>
</body>
</html>

《vue 组件化开发 slot插槽使用》