slot插槽使用與傳參

使用規則：

子組件：  slot ( name="定義插槽的名稱"  arg1="參數1" ) 正常傳props 

父組件：  template ( v-slot:插槽名稱="scope" ) ；scope為實參，它是一個對象  ，里面的每個字段是子組件傳過來的props，此時scope即為：{arg1："參數1"}

例子如下：

子組件：

// ChildrenComponent


.children-component
  div 我是子組件
  slot(name="bottom" arg1="參數1" arg2="參數2" :arg3="arg3")


  export default {
    data(){
      return {
        arg3:"我是參數3"
      }
    }

  }

 父組件：

<template lang="pug">
.page
    div 下面如何使用子組件的插槽以及參數
    ChildrenComponent
        template(v-slot:bottom="scope") // v-slot:插槽名稱="實參對象"

           div {{scope.arg1}}
           div {{scope.arg2}}
           div {{scope.arg3}}
</template>

效果：

 ps：父組件在使用子組件具名插槽獲取參數是：<template v-slot:名稱="參數對象"></template> ，如果插槽名稱是變量，則可以<template v-slot:[名稱變量]="參數對象"></template>，v-slot必須寫在template這個元素上，不可以是其他標簽。