Vue插槽slot详细解析

Vue插槽slot

在封装完一个组件后，当需要在不同的父组件中使用它时，对于不同组件有不同增加div等标签的需求，这时候需要在自组加添加一个slot占位符来防止父组件有新的添加内容。

slot相当于占位符，它在组件中给你的HTML模板占了一个位置，你来传入一些东西，它本身会被替换。

类别

默认插槽

具名插槽

作用插槽

插槽基本使用

父组件中

<template>
  <div id="app">
    <MyChildren>
      <!-- 一般情况下，这里不能写内容（添加div标签等或字段），这时候可以在子组件添加一个占位符slot -->
      <div>这是子组件的占位符提供的内容------由父组件提供的内容</div>
      <div>这也是父组件提供的，slot占位符可以提供多个字段</div>
    </MyChildren>
  </div>
</template>
复制代码

子组件（children）

<template>
   <div class="">
      hello-----这是子组件的原本内容
      <slot>
         <span>我是默认内容</span>    // 在父组件没有使用占位符的时候才会显现
      </slot>
   </div>
</template>
复制代码

效果图

 

1.默认插槽

<template>
   <div class="">
      hello-----这是子组件的原本内容
      <slot>
         <span>我是默认内容</span>    // 在父组件没有使用占位符的时候才会显现
      </slot>
   </div>
</template>
复制代码

2.具名插槽

其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

示例

<slot name="名称"></slot>
复制代码

子组件中

<template>
   <div class="">
      helloWorld-----这是子组件的原本内容
      <slot name="oneSlot">
         <span>oneSlot默认内容</span>
      </slot>
      <slot name="twoSlot">
         <span>twoSlot的默认内容</span>
      </slot>
   </div>
</template>
复制代码

父组件

<template>
  <div id="app">
    <MyChildren>
      <!-- 用template标签和v-slot选择slot具名插槽 -->
      <template v-slot:oneSlot>           
        <div>这是oneSlot的传输值</div>
      </template>
      // 可以用#进行缩写
      <!-- <template #twoSlot>           
        <div>这是twoSlot的传输值</div>
      </template> -->
    </MyChildren>
  </div>
</template>
复制代码

效果图

 

3.作用域插槽

<slot :自定义的名字=属性或对象></slot>
复制代码

作用域插槽就是实现在子组件自行决定自己要显示什么内容

子组件可以在slot标签上绑定属性值，大概是说在作用域插槽内，父组件可以拿到子组件的数据

子组件中

<template>
   <div class="">
      helloWorld-----这是子组件的原本内容
      <slot :data="object1">
         <span>oneSlot默认内容</span>
      </slot>
      <slot name="oneSlot" :data="object2"></slot>
   </div>
</template>
​
<script>
export default {
   name: 'MyChildren',
   data() {
      return {
         object1:{
            name:'lk',
            age:18
         },
         object2:{
            name:'zy',
            age:17
         }
      }
   },
}
</script>
复制代码

父组件中

<template>
  <div id="app">
    <MyChildren>
      <!-- 这里scope名字任意，用slot-cope取子组件传来的值 -->
      <template slot-scope="scope">
        <div>我叫{{scope.data.name}}，今年{{scope.data.age}}岁了</div>
      </template>
      <!-- v-slot:oneSlot="scope"既可以取具名插槽，也可以取该插槽的数据 -->
      <template v-slot:oneSlot="scope">
      <div>我的对象叫{{scope.data.name}}，今年{{scope.data.age}}岁了</div>
      </template>
    </MyChildren>
  </div>
</template>
复制代码

效果图