Vue slot的理解

VUE的Slot插槽

1、为什么使用插槽，理解插槽

理解：slot插槽类似于生活中的电脑，usb插槽接口，可以根据用户不同的需求，插入不同的外设实现不同的性能，如插入usb、键盘、鼠标、手机、音响等，实现存储，打字，鼠标操作放歌等不同功能。

Slot:组件插槽slot则是提供个组件，预留些空间（slot），供其他页面或者组件使用时插入自己想实现的功能，更具有扩展性.

插槽分类：在官方文档中，插槽有三种：单个插槽、具名插槽、作用域插槽。

2、插槽详解

2.1、单个插槽

父组件app.vue

<template>
  <div id="app">
    <test-slot>
      <span>我是父组件里的文字，但是我要被放到子组件里</span>
    </test-slot>
  </div> 
</template> 
 
<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {
      
    }
  },
  components:{
    testSlot
  }
}
</script>

<style>

</style>

————————————————
子组件testSlot.vue

<template>
  <div>
    <h3>test-slot</h3>
    //父组件里的span会替换掉slot所以这里的123是看不见的
    //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
    <slot>123</slot> 
  </div> 
</template> 
 
<script>
export default { 
  data(){
    return {
      
    }
  }
}
</script>

<style>

</style>

————————————————
效果图：

让我们来总结一下：
app.vue中注册了新的标签testSlot，并在该标签中写入了内容。而在testSlot标签的模板文件testSlot.vue中，使用了标签作为插槽，来渲染加载testSlot标签中的内容。
而上面这个标签，就叫做单个插槽。
————————————————

2.2、多个插槽也叫具名插槽

具名插槽就是将某个名字的内容插到子组件对应名字里面去
父组件app.vue

<template>
  <div id="app">
	//使用子组件testSlot
    <test-slot>
	  //slot=one这个div会替换掉子组件里name="one"的slot标签
      <div slot="one">
        <span>one</span>
        <span>第一个</span>
      </div> 
      //这个div没有用slot指定名字所以会替换掉子组件里没有name属性的slot标签
      <div>
        <span>此div没有slot</span>
      </div>
      //slot=two这个div会替换掉子组件里name="two"的slot标签
      <div slot="two">
        <span>two</span>
        <span>第二个</span>
      </div> 
    </test-slot>
  </div> 
</template> 
 
<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {
      
    }
  },
  components:{
    testSlot
  }
}
</script>

<style>

</style>

————————————————
子组件testSlot.vue

<template>
  <div class="testSlot">
    <div class="noneSlot">
      <slot></slot> 
    </div>
    <div class="test-two">
      <slot name="two"></slot> 
    </div>
    <div class="test-one">
      <slot name="one"></slot> 
    </div>
  </div> 
</template> 
 
<script>
export default { 
  data(){
    return {
      
    }
  }
}
</script>

<style>

</style>

————————————————

2.3、作用域插槽（将子组件的值传到父组件供使用）

1、把子组件里的数据传递给父组件，并且父组件按照自己的需求实现不一样的功能展示

父组件fatherSlot.vue

<template>
			<!--第一次使用：这里是子组件原有的数据样式展示-->
			<ChildSlot></ChildSlot> 
			
			<!--第二次使用：目的是获取子组件中的pLanguages，并且根据自己的需求功能实现不同展示-->
            <ChildSlot>
                <template slot-scope="slot">
                 <!--<span v-for="item in slot.data" :key="item">{{item}}</span>-->
                   <!--使用数组的join方法将数组转换成字符串，并且以“——”横线符号隔开-->
                  <span>{{slot.data.join('-')}}</span>  
                </template>
            </ChildSlot> 
            
			<!--第三次使用：目的是获取子组件中的pLanguages，并且根据自己的需求功能实现不同展示-->
			<ChildSlot>
                <template slot-scope="slot">
                  <!--<span v-for="item in slot.data" :key="item">{{item}}</span>-->
                   <!--使用数组的join方法将数组转换成字符串，并且以“*”星号符号隔开-->
                   <span>{{slot.data.join('*')}}</span>  
                </template>
            </ChildSlot>   
    </div>
</template>
<script>
    import ChildSlot from '../../views/slot/childSlot'
    export default {
        name: "fatherSlot",
        components: {
            ChildSlot
        }
    }
</script>

————————————————
子组件childSlot.vue

<template>
    <div>
    	 <slot :data="pLanguages">
			<ul>
               <li v-for="item in pLanguages" :key="item">{{item}}</li>
            </ul>
		</slot>
    </div>
</template>
<script>
    export default {
        name: "childSlot",
        data(){
            return{
                pLanguages:['javaSciprt','C++','Java','C#','Python','Go','Swift']
            }
        }
    }
</script>

————————————————
效果图：

让我们来总结一下：
1.首先在子组件中使用v-bind:data绑定数据；
2.然后在父组件中，通过slot-scope来把这个绑定的数据对象进行重命名:slot-scope="slot"来取得作用域插槽v-bidn:data绑定的数据，"slat"可以随便替换其他名称，只是定义对象来代表取得的data数据，用于使用而已。
这样就可以在父组件中使用子组件的数据了。

3、获取当前行的说明

<el-table-column label="操作" width="300" fixed="right">
	<template slot-scope="scope">
		<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
		<el-button type="text" @click="editDengmi(scope.row)">编辑</el-button>
		<el-button type="text" @click="deleteDengmi(scope.row)">删除</el-button>
	</template>
</el-table-column>

结合前文所述，可以知道，这里是使用了作用域插槽，通过**slot-scope=“scope”**将el-table-column标签中绑定的当前行的数据对象重命名为scope，进而再通过scope.row来获取当前行的数据。

查看el-table-column的源文件，在加载之前，对变量其进行了初始化的操作：

然后在加载数据时，对row进行了赋值：