默认插槽

app.vue

• app是父组件，test是子组件

<template>
<div>
  <test>
    <!-- www不会显示 -->
    <h1>www</h1>
  </test>
</div>
</template>

<script>
import test from './components/test'
export default {
 components:{test},
}
</script>

test.vue

• 要想让父组件的www显示，必须要在子组件配置slot标签，配置如下：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

配置了slot，www可以在页面展示

www.PNG

• slot是占位标签，让app父组件里的<test>的<h1>渲染生效

具名插槽

app.vue

• app父组件给slot指定名字，如下：

<template>
<div>
  <test>
    <!-- 给slot取名的第一种方法 -->
  <!-- slot="main" slot取名main-->
   <img slot="main" src="https://www.runoob.com/images/klematis.jpg" alt="">
   <h2 slot="tips">植物大战僵尸真好玩</h2>
  </test>
  <test>
    <!-- 给slot取名的第二种方法 用template包裹 -->
    <!-- template v-slot:main v-slot取名main -->
   <template v-slot:main>
   <video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
   <h2>我们都喜欢唱歌</h2>
   </template>
  </test>
  <test>
   <h1>第三个tab</h1>
  </test>
</div>
</template>

<script>
import test from './components/test'
export default {
 components:{test},
 
}
</script>

<style>
div{
 display: flex;
 justify-content: space-around;
}
</style>

test.vue

• 可以根据父组件的slot名展示

<template>
  <div>
    <slot name="main"></slot>
    <slot name="tips"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
}
</script>

• 效果如下：

  
  
  三个效果.PNG

实际流程如下：

slot流程.PNG

• 父组件里面的<test><h1>第三个tab</h1></test>没有取名的，在test.vue 文件里用不含name的<slot></slot>接收渲染，不然<h1>第三个tab</h1>不显示

作用域插槽

test.vue

• 把数据写在子组件，通过插槽slot把数据传递给父组件 test.vue====>>app.vue

<template>
  <div >
    <div>
      <!-- 在slot里面写属性，这个属性可以把值传给父组件,
      父组件用template slot-scope=""这个的方式接收 -->
      <!-- 类似：父组件：<Demo :data="f"></Demo> 子组件用props接收-->
     <slot :chi="foods"></slot>
    </div>
   
  </div>
</template>

<script>
export default {
   data(){
  return {
   foods:['鸡蛋','豆腐','牛肉','花生']
  }
 }
}
</script>

App.vue

• 必要用template slot-scope=""这种固定写法接收子组件传过来的值

<template>
<div>
  <test>
    <!-- 要想接收子组件slot传过来的值，必要用template slot-scope=""这种固定写法
    引号里面的是，子组件的slot标签体里面的自定义的属性名 -->
    <template slot-scope="chi">
      {{chi}}
    </template>
  </test>
 
</div>
</template>

<script>
import test from './components/test'
export default {
 components:{test},
}
</script>

<style>
div{
 display: flex;
 justify-content: space-around;
}
</style>

• 流程图：

  
  
  作用域卡槽.PNG

作用域卡槽：在test子组件的slot标签可以看着一个公共的父组件slot，父组件slot里面传值后，父组件app可以用template slot-scope接收值，可以把这个slot-scope当做一个props

大总结：

• 父组件引入子组件，在test子组件标签体里面写其它标签【例如：h1】，必须在本身的test.vue子组件文件里面用slot标签接收【例如：h1】
• test子组件里面的标签h1用属性slot="main"取了名，本身的test.vue子组件文件里面用slot标签name="main"接收
• 作用域卡槽：在test子组件的slot标签可以看着一个公共的父组件slot，父组件slot里面传值后，父组件app可以用template slot-scope接收值，可以把这个slot-scope当做一个props