目录

一、前言

完整内容请关注：

开始前的准备：

 二、slot插槽的基本使用

子组件：

父组件：

展示效果：

三、域名插槽的基本使用

子组件:

父组件:

效果展示:

注意：

四、如何通过slot从子组件获取内容

子组件

父组件

效果展示：

五、作用域插槽案例

子组件

父组件

效果展示：

---

一、前言

完整内容请关注：

https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482

开始前的准备：

首先创建两个子组件，soltOne是基础使用，soltTwo是域名插槽使用，soltThree是演示父组件获取子组件内容，图片后的代码一定要注意，容易出现很多细节上的小问题。

import SoltOne from './components/soltOne.vue'
import SoltThree from './components/soltThree.vue'
import SoltTwo from './components/soltTwo.vue'
export default {
    name: 'app',
  components: {
    SoltOne,
    SoltTwo,
    SoltThree
 
  },

 二、slot插槽的基本使用

子组件：

在子组件中使用 给值留下位置，可以得到父组件的值

 
<script>
export default {
   name:'soltOne' 
}
script>
 
<style>
 
style>

父组件：

 <solt-one>有Bug发生solt-one>

展示效果：

 以上就是插槽的最基本的使用

三、域名插槽的基本使用

子组件:

这里，我简单的划分了三个区域，一个头部，内容，尾部

头部和尾部 都给上了name：‘’让其获得域名

 
<script>
export default {
    name:'soltTwo'
}
script>
 
<style>
 
style>

父组件:

在此内容下，p标签内只要对应子组件起的name名，就能把值赋值到想要的地方，没有name名的将会赋值到，子组件中没有name名的位置。

  <p slot="header">头部信息p>
  <p>主要内容1p>
  <p>主要内容2p>
  <p slot="footer">尾部信息p>

效果展示:

父组件还有一种，可以通过域名来实现插槽，使用v-slot:来获取子组件的域名，从而指定赋值，其中也可以添加多条内容，比上一种方法更完善。

<solt-two>
  <template v-slot:header>
     <p>头部信息1p>
     <p>头部信息2p>
  template>
  <p>主要内容1p>
  <p>主要内容2p>
   <template v-slot:footer>
     <p>尾部信息1p>
     <p>尾部信息2p>
  template>
solt-two>

注意：

这里的顺序是根据子组件的顺序排列，父组件跟换域名位置，还是按照子组件的域名排序出现

内容会跟着父组件发生改变

<solt-two>
  <template v-slot:footer>
     <p>头部信息1p>
     <p>头部信息2p>
  template>
  <p>主要内容1p>
  <p>主要内容2p>
   <template v-slot:header>
     <p>尾部信息1p>
     <p>尾部信息2p>
  template>
solt-two>

四、如何通过slot从子组件获取内容

子组件

这里需要注意的是，要将子组件的值进行v-bind绑定

 
<script>
export default {
    name:'soltThree',
     data(){
    return{
      list:[1,2,3,4,5,6,7,8,9]
    }
  }
}
script>
 
<style>
 
style>

父组件

一下提供了四种，子组件的值可以使用v-for遍历，这里的list1是自己新起的名字，son是子组件绑定的，slot-scope这种方法逐步出现了淘汰， #default这种方法比较推荐，看起来就很简单好记

  
  <template v-slot="list1">
      <div>{{list1.son}}div>
  template>
  
 
  <solt-three>
  <template v-slot:default="list1">
      <div>{{list1.son}}div>
  template>
  solt-three>
 
  <solt-three>
  <template #default="list1">
  <ul>
      <li v-for="(item,index) in list1.son" :key="index">{{item}}li>
  ul>    
  template>
  solt-three>
 
<solt-three>
  <template slot-scope="list1">
      <div>{{list1.son}}div>
  template>
  solt-three>

效果展示：

五、作用域插槽案例

 父组件替换插槽的标签，但是内容是由子组件来提供。

​ 当组件需要在多个父组件多个界面展示的时候，将内容放在子组件插槽中，父组件只需要告诉子组件使用什么方式展示界面。

子组件

<template >
 
  <div>
      <slot :data="pLanguage">
          <ul>
              <li v-for="(item, index) in pLanguage" :key="index">{{item}}li>
            ul>
      slot>
 
    div>  
template>
 
<script>
export default {
   name:'oneText' ,
      data() {
        return {
          pLanguage:['JavaScript','Java','C++','C']
        }
      },
    }
 
script>
 
<style>
 
style>

父组件

 

 
    <one-text>
      <template #default="slot">
      <span>{{slot.data.join(' - ')}}span>
      template>
    one-text>
    <one-text>
        <template #default="slot">
        <p><span v-for="(item, index) in slot.data" :key="index">{{item}}span>p>   
        <span>{{slot.data.join(' * ')}}span>
        template>
    one-text>

效果展示：