Vue slot 建议用法

Vue slot 插槽

---

前言

一、什么时候用到插槽

父组件需要传给子组件的模板代码
用<slot></slot> 占位，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

二、使用建议

1.老版本 (slot-scope)

<template>
  <div>
    <slot name='header'></slot>
    <slot name='content' :bValue='bbb'>
    <p>{{name}}我是子组件,slot默认内容</p>
    </slot>    
    <slot name='footer'></slot>
  </div>
  
<script>
export default {
  name:'B',
  data(){
    return {
     name:'bbb'
    }
  }
}
</script>
</template>

<template>
  <div>
    <p>我是父组件</p>
    <B>
      <template slot="header">
        <p>我是header部分</p>
      </template>
 
      <template slot="content" slot-scope='bValue'>
      父组件{{bValue}}获取子组件bValue
      </template >

      <template slot="footer">
        <p>我是footer部分</p>
      </template>
    </B>
</template>
 
<script>
import B from './B.vue'    //引入B组件
export default {
  name:'A',
  components:{      //注册B组件
    B
  },
  data(){
    return {
 
    }
  }
}
</script>

2.vue2.6+ 或 vue3 (v-slot)

子组件没有变化

父组件

<template>
  <div>
    <p>我是父组件</p>
    <B>
      <template v-slot:header>
      	语法糖  (v-slot:header) = (#header)
        <p>我是header部分</p>
      </template>
 
      <template #content='{bValue}'>
      (#content)  =   (v-slot:content)
      父组件{{bValue}}获取bValue
      </template >

      <template #footer>
        <p>我是footer部分</p>
      </template>
    </B>
</template>

总结

建议使用v-slot（语法糖 #）