转 Vue插槽有什么作用？

 

 

vue解惑之slot(插槽)

 

一.插槽是个什么玩意，能吃吗

• 在vue中【插槽】，从字面意思来看，插槽意味着【内容的增加】，回到vue的使用场景，插槽就是【父组件调用子组件时，额外增加的内容】。
• 插槽显不显示、显示的内容是由父组件来控制的，而插槽在哪里显示由子组件来决定

二.插槽怎么用，好用吗

    1.默认插槽

       父组件

1 <template>
2   <div>
3     父组件的内容
4     <slot1>
5       <p style="color:red">父组件中插槽内容</p>
6     </slot1>
7   </div>
8 </template>

 

    子组件

<template>
  <div>
    <div>slot1子组件</div>
    <slot></slot>
  </div>
</template>
<script>

    效果

       从上面可以看出，父组件引用子组件标签里的内容被加在了子组件<slot>标签中。slot就是一个插槽，当父组件调用子组件时，父组件的内容被插入到子组件相应的位置中了。

   2.具名插槽

       顾名思义，就是有具体名字的插槽，子组件中与父组件相对应名字的内容将添加。

    3.作用域插槽

　　父组件

<template>
  <div>
    作用域插槽父组件
    <slot2>
      <template slot-scope="user">
        <div v-for="(item, index) in user.data" :key="index">
          <span>姓名：{{item.name}}</span>;
          <span>年龄：{{item.age}}</span>
        </div>
      </template>
    </slot2>
  </div>
</template>
<script>
import slot2 from "./slot2"
export default {
  name: 'main',
  components: {
    slot2
  }
}
</script>
<style scoped>
</style>

　　子组件

<template>
  <div>
    作用域插槽的子组件
    <slot :data="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'slot2',
  data () {
    return {
      user: [
        {name: '王五', age: '23'},
        {name: '李二', age: '45'},
        {name: '张三', age: '15'}
      ]
    }
  }
}
</script>

　　效果

　　父组件使用slot-scope接收来自子组件传过来的参数。

 

 

 

 

 

 

 

 

 

--------------------------------------------------------------

什么是插槽
插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
2. 插槽的基础用法
声明一个插槽区域。vue 官方规定：每一个 slot 插槽，都要有一个 name 名称，如果省略了 slot 的 name 属性，则有一个默认名称叫做 default，在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。没有预留插槽的内容会被丢弃，如果在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃。
3. 具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的name 名称。这种带有具体 名称的插槽叫做“具名插槽”。注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。
3.1 为具名插槽提供内容
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用v-slot 指令，并以v-slot 的参数的 形式提供其名称。

3.2 具名插槽的简写形式。跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容(v-slot:) 替换为字符#。例如v-slot:header可以被重写为#header：的格式。
默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中。
1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令。
2. v-slot: 后面要跟上插槽的名字。
3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上（也可直接用于组件上）。
4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素。
5. v-slot: 指令的简写形式是 #

　　使用场景：如果子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同的呈现方式，这时就需要用到作用域插槽

 

分类: Vue