Vue 插槽


1.什么是插槽 ?

Vue 官方文档:
  Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口

个人理解:
  子组件中的提供给父组件使用的一个占位符,使用 <slot> 表示,父组件可以在这个占位符中填充任何模板代码,填充的内容会替代子组件中 <slot> 标签,类似于种萝卜,一个萝卜一个坑,种不种萝卜由父组件决定,而萝卜在哪种由子组件决定


2.插槽的分类

根据插槽的使用场景,可以将插槽分为三种类型:
  ①.匿名插槽
  ②.具名插槽
  ③.作用域插槽


2.1.匿名插槽

  匿名插槽,也称为单个插槽、默认插槽,就是没有 name 属性的插槽,可以放置在子组件的任意位置;但是一个组件只能由一个这样的插槽,作为备用插槽
实例:
  父组件 parent.vue

<template>
  <div class="parent-container">
    <Child>
      <test> 匿名插槽内容 </test>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child,
  },
};
</script>

  子组件 Child.vue

<template>
  <div class="child-container">
      <!-- 匿名插槽 -->
      <slot>content</slot>
  </div>
</template>

<script>
export default {

}
</script>

注意:当匿名插槽没有被使用时,显示匿名插槽中的默认内容


2.2.具名插槽

  具名插槽,顾名思义,就是有名字的插槽,名字通过 name 属性来定义,一个组件中可以有很多的具名插槽,出现在组件的不同位置;我们可以在 template 标签上使用 v-slot 指令,并以v-slot 指令的参数绑定插槽的 name
案例:
  父组件 Parent.vue

<template>
  <div class="parent-container">
    <Child>
        <template v-slot:header>
            <test>页头</test>
        </template>
        <test>主题内容</test>
        <template v-slot:footer>
            <test>页脚</test>
        </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child,
  },
};
</script>

  子组件 Child.vue

<template>
  <div class="child-container">
      <div class="header">
          <!-- 具名插槽 -->
          <slot name="header"></slot>
      </div>
      <div class="main">
          <!-- 匿名插槽 -->
          <slot></slot>
      </div>
      <div class="footer">
          <!-- 具名插槽 -->
          <slot name="footer"></slot>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

注意:1.任何不带有 v-slot 属性并未被 template 标签包裹的内容都会被当做匿名插槽内容
   2.被 template 标签包裹不带 name 的插槽都会有一个默认名字 default
   3.跟 v-onv-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

<template>
  <div class="parent-container">
    <Child>
        <template #header>
            <test>页头</test>
        </template>
        <test>主题内容</test>
        <template #footer>
            <test>页脚</test>
        </template>
    </Child>
  </div>
</template>


2.3.作用域插槽

  插槽和模板其他地方一样都可以访问相同的实例属性(即相同作用域),而不能访问其它作用域,如果想访问其它作用域,那就需要把想访问的数据绑定到 <slot> 上,然后在父组件中用 v-slot 设置一个值来定义插槽的名字
案例:
  父组件 Parent.vue

<template>
  <div class="parent-container">
    <Child :list="list">

      <!-- 作用域插槽 -->
      <template v-slot="prop">
          <button class="edit" @click="edit(prop)">编辑</button>
          <button class="delete" @click="del(prop)">删除</button>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      list: [
        {id: 3, name: "Tom"},
        {id: 2, name: "Alice"},
        {id: 1, name: "Jreey"}
      ]
    }
  },
  components: {
    Child,
  },
  methods: {
    edit(prop) {
      console.log(prop, "edit prop");
    },
    del(prop) {
      console.log(prop, "del prop");
    }
  }
};
</script>

  子组件 Child.vue

<template>
  <div class="child-container">
    <ul class="title">
        <li>编号</li>
        <li>姓名</li>
        <li>操作</li>
    </ul>
    <ul v-for="item in list" :key="item.id">
        <li>{{ item.id }}</li>
        <li>{{ item.name }}</li>
        <li class="oper">
            <slot :row="item" :myId="item.id"></slot>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    props: ["list"]
}
</script>

注意:绑定在 <slot>上的属性称为插槽 prop ,我们可以使用 v-slot 设置一个值定义我们提供的插槽 prop的名字直接使用


2.3.1.解构插槽 Prop

  作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里,这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式


解构插槽.png


3.动态插槽名

  动态指令参数也可以用在 v-slot 上,来定义动态的插槽名:

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容