vue中插槽的使用

1. 什么是插槽

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。 

匿名插槽

父组件

 <Cslot>
   <div>01header</div>  // 父组件插槽更改信息
  </Cslot>

子组件 

  <Cslot> 
    <slot></slot>   //  子组件插槽预留位置
    <input type="text">
  <Cslot>

效果图 

 具名插槽

父组件

  <Cslot> 
    <template #footer>   //父组件要加上template  而且还得有#footer
      <div>02footer</div>  父组件更改位置
    </template>
  <Cslot>

子组件

<input type="text">
 <slot name="footer"></slot>  //子组件加上插槽名字

效果

 作用域插槽  传值操作

子组件

html部分
    <input type="text">
 <slot name="footer" :user="user">  //:user="user"
</slot>


js部分 

data(){
      return{
        user:{
          name:'张三',
          age:18
        }
      }

  },

父组件

  <Cslot> 
    <template #footer='{user}'>   //#footer='{user}'  直接结构赋值了
         <div>02footer {{user.name}} {{user.age}}</div>
    </template>
  <Cslot>

效果