Vue中插槽slot的使用

  插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示怎样显示

  由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板插槽模板两大类。

  非插槽模板指的是html模板,比如‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;

  插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置

1、插槽内容

  vue实现了一套内容分发的api,将 slot 元素作为承载内容分发的出口。

  插槽内可以包含任何模板代码,包括html,以及其他组件。

  如果组件内没有一个 slot 元素,那么该组件起始标签和结束标签之间的任何内容都会被抛弃。

2、编译作用域

  规则:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的

3、后备内容

  有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。

  很简单,就是默认值的概念。<slot>Submit</slot>

4、具名插槽

  需要多个插槽的情况,slot 元素有一个特殊的属性:name,用来定义额外的插槽。一个不带 name<slot> 出口会带有隐含的名字“default”。

  在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:

<template v-slot:footer>
  <p>Here‘s some contact info</p>
</template>

  现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot<template> 中的内容都会被视为默认插槽的内容。

  注意:v-slot只能添加在一个 <template> 上(有一种例外),这一点和已废弃的slot特性不同

5、作用域插槽

<current-user>
  {{ user.firstName }}
</current-user>

  上述代码不会正常工作,因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。为了让 user 在父级的插槽内容可用,我们可以将 user 作为 <slot> 元素的一个特性绑定上去:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

  绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

  我们选择将包含所有插槽 prop 的对象命名为 slotProps,但你也可以使用任意你喜欢的名字。

  (1)独占默认插槽缩写方式:

  当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上,这也就是上面说的例外情况

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

  注意:只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法

  (2)解构插槽:

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

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

  解构:v-slot="{ user }"

  重命名:v-slot="{ user: person }"

  定义默认值:v-slot="{ user = { firstName: ‘Guest‘ } }"

6、动态插槽名

  <template v-slot:[dynamicSlotName]> ... </template>

7、缩写

  v-slot:header 可以被重写为 #header

8、其他示例

  主要来自官网学习整理:https://cn.vuejs.org/v2/guide/components-slots.html

原文地址:https://www.cnblogs.com/goloving/p/11126937.html

时间: 2024-10-08 01:08:16

Vue中插槽slot的使用的相关文章

vue中插槽

当定义完一个组件后,可能在使用时还需要往这个组件中插入新的元素或者文本.这个时候就可以使用插槽来完成. 在定义`template`时,在需要插入的地方使用`<slot></slot>`标识出来.在使用时只需将传递的值放在定义的组件标签包裹起来即可. 插槽可以设置默认值.在定义template时,用`slot`标签包裹起来即可,当没有传递值时就使用默认值,但传值后,则使用新的值. 插槽当中的变量是从父组件的变量中读取的,而非从该组件中读取.也就是说:在插槽中使用`{{  }}` 定义

vue中的slot理解和使用

最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue的相关环境,创建了一个项目,实际动手看看是什么东西, 现理解为: 用父组件的内容去替换掉子组件的内容: 根据父组件中的 <div slot="slot1">slottest</div> 如果引入的子组件中有 <slot name="slot1&quo

vue中的slot与slot-scope

深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 原文地址:https://www.cnblogs.com/knuzy/p/9485951.html

vue中插槽作用域的使用

一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接受到. 3.例父组件 App.vue 中 <template> <div id="app"> <header-com> <template scope="

深入理解vue中的slot与slot-scope

<template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span

Vue中的slot(占坑,预留位置)

子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> <div class="Slots"> <div class="myd"> 在子组件中不使用slot时SlotChildwithnoslots下的内容不会显示 <SlotChildwithnoslots> <div class="no-name&quo

vue的插槽slot

插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容       slot 标签位置 规定了父插入内容的位置. 2.slot标签 有name属性,通过设置不同的name值,实现父级不同的元素插在对应的位置 原文地址:https://www.cnblogs.com/dangdanghepingping/p/10254486.html

vue中的插槽slot理解

本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; var name = name || 张三; console.log(age,name); } show(); // 20,张三 show(18,"命名") // 18,明明 如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活 vue中的组件,也可以有默认的模

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>