vuejs中的默认插槽-具名插槽-作用域插槽三者的比较

最新推荐文章于 2024-07-26 13:02:41 发布

itclanCoder

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量943

点赞数 2

文章标签： vue javascript html java python

本文链接：https://blog.csdn.net/wzc_coder/article/details/124743515

版权

本文介绍了VueJS中的默认插槽、具名插槽和作用域插槽，详细讲解了它们的使用场景和区别。通过示例代码展示了如何在父组件中插入内容到子组件特定位置，以及如何通过具名插槽和作用域插槽实现内容分发和数据传递。最后提到了插槽在组件复用和管理复杂表单时的重要性。

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

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

Vue中的插槽是一个非常强大的功能,在复用组件模块的时候,针对相似的结构,拥有不通的内容时,使用插槽就非常方便,一定程度上可以减少在模板中使用大量的逻辑判断,控制显示不通的内容

同时,也可以让代码组织结构更加清晰,虽然使用上是简单了,但是插槽有些不是很好理解，不是很直观

它是让父组件可以向子组件指定位置处插入一html结构,自由灵活,也是组件间的一种通信方式

形式上有,默认插槽,具名插槽还有作用域插槽

大家在使用element-ui表格的时候,虽然都知道怎么用,表头,以及内容模板的渲染,就使用了插槽,但是往往是很迷糊的

因为被抽象了的

今天就一起来学习下,学完之后,在看element-ui表格的时候,希望能给你带来一些启发,下次再次使用时,理解更上一层楼

默认插槽

官方文档里介绍到:Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口

这句话不是很好理解,换句话说,也就是,<slot>可以充当元素标签的占位符,可以代替在父组件引用的组件内的html标签内容

以如下示例所示

在App组件中引入SlotBase.vue组件

<template>
  <div id="app">
     <SlotBase
              :lists="lists">
             <p>默认内容</p>
     </SlotBase>
  </div>
</template>

<script>

import SlotBase from "./components/SlotBase.vue"

export default {
  name: 'App',
  components: {
    SlotBase
  },
  data() {
    return {
      lists: [
        {
          id: "001",
          title: "直播卖酒"
        },
        {
          id: "002",
          title: "直播打赏"
        },
        {
          id: "003",
          title: "直播炫富"
        }
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

而在编写SlotBase.vue组件中,引入slot标签,如下所示

<template>
    <div class="wrap">
        <div class="list" v-for="list in lists" :key="list.id">
            {
   {list.title}}
            <!-- 此处引入slot标签 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SlotBase",
        props: {
            lists: {
                type: Array
            }
        },
        mounted() {