vue slot插槽 匿名插槽，具名插槽，和作用域插槽

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 首先需要理解的是插槽的作用就是在调用组件的时候，让两标签之间的内容显示出来，举例来说 我们有一个 childe组件 引入到父组件中 <Child> </Child>,默认如果在两个标签内加内容，他是不显示的 比如<Child><div>是谁的心儿啊</div> </Child> 渲染出来 div里的内容是不会显示的，这时候插槽的作用就显现出来了

匿名插槽（默认插槽）

声明子组件 Child

<template>
    <div>
        <slot></slot>
        <el-input v-model="InputValue" />
    </div>
</template>
<script>
  export default{
     data(){
       return {
         name:"是谁的心儿啊",
         InputValue:""
       }
     }
  }
</script>

声明父组件

<template>
    <div>
       <span>这是父组件</span>
       <Child>
          <template>
             突然很想你
          </template>
       </Child>
    </div>
</template>
<script>
  import Child from './Child'
  export default{
     data(){
       return {
         
       }
     }，
     components:{
		Child:Child
     }
  }
</script>

最后子组件 的 slot 标签就被 <Child> </Child>中间的内容替代

具名插槽

具名插槽和匿名插槽一样知识有多个插槽内容的时候能够根据名称判断如何渲染 还是先声明子组件

<template>
    <div>
        <slot name="first"></slot>
        <el-input v-model="InputValue" />
        <slot name="second"></slot>
        <slot name="third"></slot>
    </div>
</template>
<script>
  export default{
     data(){
       return {
         name:"是谁的心儿啊",
         InputValue:""
       }
     }
  }
</script>

可以看出子组件有三个插槽的位置，其名称分别为 first second third 接下来声明父组件

<template>
    <div>
       <span>这是父组件</span>
       <Child>
          <template v-slot:first>
             first 第一个的内容
          </template>
          <template v-slot:second>
             second 第二个内容
          </templat>
          <template v-slot:third>
             third  第三个内容
          </templat>
       </Child>
    </div>
</template>
<script>
  import Child from './Child'
  export default{
     data(){
       return {
         
       }
     }，
     components:{
		Child:Child
     }
  }
</script>

其最后结果 就是 第一个template 里的 “ first 第一个的内容” 会替代子组件slot name="first" 显示 依次类推，第二个和第三个也是这样的

作用域插槽

作用域插槽，就是利用插槽进行数据的传递，可以用来把子组件数据传递给父组件 还是先声明自组件

<template>
    <div>
        <slot name="first" :type="type" :classType="classType" ></slot>
        <el-input v-model="InputValue" />
    </div>
</template>
<script>
  export default{
     data(){
       return {
         type:"是谁的心儿啊",
         classType:"完美日记"
         InputValue:""
       }
     }
  }
</script>

子组件 在slot插槽里 绑定了两个属性 type和 cassType ，

然后我们声明父组件

<template>
    <div>
       <span>这是父组件</span>
       <Child>
          <template v-slot:first="scope">
             first 第一个的内容
            type: {{scope.type}}
            classType:{{scope.classType}}
          </template>
       </Child>
    </div>
</template>
<script>
  import Child from './Child'
  export default{
     data(){
       return {
         
       }
     }，
     components:{
		Child:Child
     }
  }
</script>

最终结果

<template>
  //Child之间的内容替代子组件的sloa标签显示
  <div>
     first 第一个的内容
     type:"是谁的心儿啊"
     classType:"完美日记"
     <el-input v-model="InputValue" />
  </div>
</templat>

注意一点，用v-slot标签的时候只能作用在 templat 标签里 否则会引发错误的，现在都支持用v-slot,所以多多用它哦