插槽：預(yù)留位置母赵，方便后期使用该酗。（主流說法就是占坑）

使用到的API

v-solt  ,  v-bind  ,  $slots  ,  $scopedSlots  ,  $attrs  ,  $listeners

一授药，基礎(chǔ)用法。

//子組件   
<div>
  <slot></slot>
</div>
......
//父組件
<div>
  <children>
    <h1>hello wolrld</h1>
  </children>
</div>
//hello world 將會放到子組件中進行渲染

二呜魄，名命插槽+傳值

//子組件
<div>
  <slot name="one" :random='slotParam'></slot>
  <slot name="two" v-bind='slotParam'></slot>
  <slot v-bind='slotParam'></slot>
</div>
<script>
export default {
  data() {
    return {
       slotParam:{name:'張精珂'}
    };
  },
};
</script>
//slot 不寫name默認(rèn)name='default'
......
//父組件
//  "#" 是v-slot:的語法糖
<div>
  <children>
    <template #one={random:{name}}> ---{{name}}---</template>
    <template #two={name}> ---{{name}}---</template>
    <div #default={name}>{{name}}</div>
    //default也可以這樣寫
    <div v-slot={name}>{{name}}</div>
  </children>
</div>
//name都將渲染為‘張精珂’

三悔叽，擴展

1,$slot,$scopedSlots.
//$slot ：非作用域插槽集合。
//$scopedSlots：作用域插槽集合爵嗅。
//子組件
    <div>
      <p v-for='(item,index) in Object.keys($scopedSlots)'>
          <slot :name="key" v-bind="scope"></slot>
      </p>
    </div>
<script>
export default {
  data() {
    return {
       slotParam:{name:'張精珂'}
    }
  },
mounted(){ console.log(this.$slot,this.$scopedSlot)}
//$slot:下例調(diào)用使用了#one娇澎，#default，打印如下睹晒。
//{two:obj}

//$scopedSlot   !!!(scopedSlot的信息===父組件的使用數(shù)量)
//{one:fun,two:fun,default:fun}
};
</script>
//父組件  -------------------------------------------------
    <div>
      <finner>
        <template #one="{ name}"> {{ one }} </template>
        <template #two> two  </template>
        <template #three="{ name}">{{ name }}  </template>
      </finner>
    </div>

2,$attrs,$listeners.
//$attrs:包含了父作用域中, attribute 綁定 (class 和 style 除外)的值趟庄，
//且props接收中的值，也不包含其中册招。（通過 v-bind="$attrs" 傳入內(nèi)部組件）岔激。
//$listeners：父作用域中的事件監(jiān)聽器，通過 v-on="$listeners" 傳入內(nèi)部組件是掰。
//父組件
<div>
  <Componenst :aaa="aaa" :bbb="bbb" @handOne="handOne" @handTwo="handTwo" />
</div>
...
data(){
  return {
    aaa:111,
    bbb:222
  }
},
method:{
  handOne(){},
  handTwo(){console.log('觸發(fā)了')}
}
...
//子組件
<div>
  <componenst-child v-bind="$attrs"  v-on="$listeners"/>
</div>
...
props{
  aaa:'這里props接收了'
},
...
//子組件
<div>
  <componenst-sun  @click='$listeners.handOne'/>
</div>
...
mounted(){
  console.log(this.$attrs,this.$listeners)
  //{bbb:222} (因子組件props內(nèi)有aaa虑鼎，所以aaa被$attrs剔除)
  //{handOne(){},handTwo(){}}
},
...