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这个元素上，不可以是其他标签。