VUE-插槽详细

一、什么是插槽slot？

     插槽就是子组件中提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码。插槽的显示与不显示，以及怎样显示都是由父组件来决定。插槽模板是slot，它就是一个空壳子，因为他的显示与隐藏由父组件控制，但是插槽显示的位置却是由子组件自身决定。slot写在组件template的什么位置，父组件传过来的模板将就显示在什么位置。

二、插槽的作用？

    slot可以在子组件内显示插入的新标签

三、插槽分类

• 单个插槽 | 默认插槽 | 匿名插槽
• 具名插槽
• 作用域插槽 | 带数据的插槽

总结：单个插槽和具名插槽不绑定数据，所以父组件提供的模板一般要既要包括样式也要包括内容，而作用域插槽，父组件只需提供一套样式，然后直接用子组件绑定的数据。所以一般子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同呈现方式，这时就需要用到作用域插槽。

1.  单个插槽 | 默认插槽 | 匿名插槽

         该插槽不用设置name属性，在子组件中放一个占位符，好在父组件中给这个占位符填充内容

   1.1 子组件children.vue

<template>
  <div id="children" class="children">
    <h3>我是单个插槽 | 默认插槽 | 匿名插槽</h3>
    <slot />
    <h3>单个插槽结束</h3>
  </div>
</template>

 1.2 父组件parent.vue

<template>
  <div id="content" class="content">
    <h3>我是父组件</h3>
    <child>
      <div class="tmp">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
    </child>
  </div>
</template>

<script>
import child from "../slot/children";
export default {
  components: { child },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {},
};
</script>

1.3 展示效果：

 

1.4 若没有在子组件children.vue中添加<slot/> ，则会出现如下内容

2.具名插槽

         当需要多个插槽时，可以使用<slot>的特性，利用其属性name，可以用来定义额外的插槽。一个子组件中可以放多个插槽，该插槽的顺序就是最后显示在页面的顺序。在父组件可以根据name名称把内容填充到对应的插槽中。

2.1 子组件children.vue设置多个具名插槽

<template>
  <div id="children" class="children">
    <h3>我是具名插槽</h3>
    <h5>-----标题-----</h5>
    <slot name="header" />
    <h5>-----内容-----</h5>
    <slot name="content" />
    <h5>-----底部-----</h5>
    <slot name="footer" />
    <h5>-----匿名插槽-----</h5>
    <slot />
    <h3>-----具名插槽结束-----</h3>
  </div>
</template>

2.2   父组件parent.vue填充内容，父组件通过v-slot:[]或者slot=“”的方式指定到对应的插槽中

<template>
  <div id="content" class="content">
    <h3>我是父组件</h3>
    <child>
      <div slot="content">
        <span>内容</span>
      </div>
      <div slot="header" class="tmp">
        <span>标题</span>
      </div>
      <div slot="footer" class="footer">
        <span>脚本</span>
      </div>
      <div class="noName">
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
        <span>菜单-4</span>
        <span>菜单-5</span>
        <span>菜单-6</span>
      </div>
    </child>
  </div>
</template>

<script>
import child from "../slot/children";
export default {
  components: { child },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {},
};
</script>
<style>
</style>

2.3 展示效果如下：

3. 作用域插槽|带数据的插槽

          也就是带数据的插槽。前面两种类型，都是在组件的template里面写。所以作用域插槽要求，在slot上面绑定数据。简单来说，子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同方式的展示和填充插槽内容。

注意：

1、单个插槽和具名插槽代码如下：

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>

作用域插槽代码如下：

子组件：
<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: [1,2,3,4]
      }
    },
}


父组件：
<child>
   html模板
</child>

2、样式父组件说了算，但内容由子组件插槽绑定的数据说了算。

3.1 子组件chidren.vue存放一个带数据的插槽

<template>
  <div id="children" class="children">
    <h3>---我是作用域插槽----</h3>
    <slot :data="list" name="area1" />
    <h3>----另一个数据作用域插槽--------</h3>
    <slot :data="data" name="area2" />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      data: ["zhangsan", "lisi", "wanwu", "zhaoliu", "tianqi", "xiaoba"],
      list: [1, 2, 3, 4],
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {},
};
</script>
<style>
</style>

3.2  父组件parent.vue通过“slot-scope”来接收子组件穿过的插槽数据，再根据插槽数据来填充插槽内容

<template>
  <div id="content" class="content">
    <h3>我是父组件</h3>
    <child>
      <template slot-scope="area" slot="area1">
        <ul>
          <li v-for="item in area.data">{{ item }}</li>
        </ul>
      </template>
      <div>------------------------------</div>
      <div slot-scope="area" slot="area2" class="area">
        <span v-for="item in area.data">{{ item }}</span>
      </div>
    </child>
  </div>
</template>

<script>
import child from "../slot/children";
export default {
  components: { child },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {},
};
</script>
<style>
</style>

3.3 展示效果如下所示：