• vue插槽（slot）想必大家都用的很熟悉了，但是父子组件中插槽的传值应该很少用吧。

1、先巩固下插槽（slot）

//子组件HelloWorld, 有两个插槽，一个插槽为first ,另一个默认名为default插槽
  <div style="border: 1px solid #333;">
      <slot name="first">默认插槽内容1</slot>
      <slot>默认插槽内容2</slot>
  </div>

//父组件,使用插槽
 <HelloWorld v-model="msg">
      <template #first>  /* # 是插槽 v-slot: 的缩写 */
        <p style="color: green">哈哈，填入插槽的内容</p>
      </template>
      <template>
        <p>填入默认插槽的内容</p>
      </template>
    </HelloWorld>

2、下面开始延时插槽的传值
插槽传值利用属性传值，利用属性slot-scope接收值，值得类型是对象的形式。

// 子组件, 里面子组件自身的数据  person = {name:'小明'，age:18}
// 通过子组件属性值的方式传递到父组件的插槽中
  <div>
      <slot name="first"  :user='person.name'>默认插槽内容1</slot>
      <slot :age='person.age'>默认插槽内容2</slot>
  </div>

//父组件,使用插槽
 <HelloWorld v-model="msg">
 /* 插槽first接收传递过来的参数slotProp, slotProp是一个对象slotProp={user:'小明'}*/
      <template #first='slotProp'> 
       /* 插槽first里面使用接收到的参数对象slotProp*/
        <p style="color: green">{{slotProp.user}}</p>
      </template>
     /* 插槽default利用slot-scope接收参数值，因为" # = '{age}'"是不成立的，但是可以写成"v-slot:default='{age}'"此方式成立。参数值通过ES6结构的方式接收*/
      <template slot-scope='{age}'>
        <p>{{age}}</p>
      </template>
    </HelloWorld>

• 以上方式实现了插槽参数的传值，渲染出来的结果如下

  <p style="color: green">小明</p>
  <p>18</p>