vue 项目中插槽的使用

神膘护体小月半

已于 2023-07-10 16:59:56 修改

阅读量199

点赞数 1

分类专栏：知识点文章标签： vue.js 前端 javascript

于 2022-06-20 14:26:23 首次发布

本文链接：https://blog.csdn.net/weixin_42154189/article/details/125371730

版权

知识点专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客探讨了Vue.js中插槽的使用，包括它们的作用、默认插槽、具名插槽以及作用域插槽。通过示例代码展示了如何在父组件中插入不同类型的插槽内容，以及如何通过具名插槽进行内容区分，并利用作用域插槽对子组件的数据进行定制化展示。

摘要由CSDN通过智能技术生成

插槽的作用

可以让父组件对子组件的指定位置插入内容，插入的内容多种多样

默认插槽

在子组件指定位置添加 slot 标签，用来替换父组件传值的内容
父组件传过来的内容可以是一个字符串，也可以是标签

子组件 childList.vue

<template>
  <div class="childList">
    <div>{{ title }} 传入的标题</div>
    <slot>插槽的默认值，调用子组件没有传内容时，会显示</slot>
  </div>
</template>

<script>
export default {
  name: "childList",
  props: ["title"],
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

父组件 HelloWorld.vue

<template>
  <div class="hello">
    <div class="right">
      <!-- 默认插槽 start -->
      <childList title="第一个对象"> 仅仅展示一句话 </childList>
      <childList title="第二个对象">
        <h2>展示的是一个标签</h2>
      </childList>
      <!-- 默认插槽 end -->
    </div>
  </div>
</template>

<script>
import childList from "../pagesCom/childList.vue";
export default {
  name: "HelloWorld",
  components: { childList },
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

可看出，第一个对象只渲染了一句字符串，第二个对象渲染的是 h 标签
并且父子组件之间的传值 title 不受影响

在这里插入图片描述

具名插槽

子组件中可能有多个位置需要父组件指定内容，此时可以使用 name 属性进行区分

子组件 childList.vue

<template>
  <div class="childList">
    <div>{{ title }} 传入的标题</div>
    <slot name="header">具名插槽头部默认值，调用组件没传内容时，显示</slot>
    <slot name="footer">具名插槽脚部默认值，调用组件没传内容时，显示</slot>
  </div>
</template>

<script>
export default {
  name: "childList",
  props: ["title"],
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

父组件 HelloWorld.vue

<template>
  <div class="hello">
    <div class="right">
      <!-- 具名插槽 start -->
      <childList title="第三个对象">
        <h2 slot="header">展示的是一个标签，头部插槽</h2>
      </childList>
      <childList title="第四个对象">
        <h2 slot="footer">展示的是一个标签，脚部插槽</h2>
      </childList>
      <!-- 具名插槽 end -->
    </div>
  </div>
</template>

<script>
import childList from "../pagesCom/childList.vue";
export default {
  name: "HelloWorld",
  components: { childList },
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

可看出，第三个对象，仅仅是头部插槽被替换。第四个对象，仅仅是脚步插槽被替换

在这里插入图片描述

作用域插槽

当数据在子组件中，数据展示方式不确定时，可以使用作用域插槽
在父组件中，可以利用 slot-scope 拟定一个对象，取到子组件中的数据，进行遍历等操作，之后再进行定制化的展示方式，如 ul-li 或 div 等

子组件 childList.vue

<template>
  <div class="childList">
    <div>{{ title }} 传入的标题</div>
    <slot :lists="lists">作用域插槽默认内容</slot>
  </div>
</template>

<script>
export default {
  name: "childList",
  props: ["title"],
  data() {
    return {
    	lists: ["11", "22", "33"],
    };
  },
  created() {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

父组件 HelloWorld.vue

<template>
  <div class="hello">
    <div class="right">
      <!-- 作用域插槽 start -->
      <childList title="第五个对象">
        <template slot-scope="dataObj">
          <ul>
            <li v-for="(item,index) in dataObj.games" :key="index">
              {{item}} 
            </li>
          </ul>
        </template>
      </childList>
      <!-- 作用域插槽 end -->
    </div>
  </div>
</template>

<script>
import childList from "../pagesCom/childList.vue";
export default {
  name: "HelloWorld",
  components: { childList },
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>