vue2.6强大的插槽（slot）的传值用法

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

1、先巩固下插槽（slot）

//子组件HelloWorld, 有两个插槽，一个插槽为first ,另一个默认名为default插槽
  

      默认插槽内容1
      默认插槽内容2
  

//父组件,使用插槽
 
      
      
    

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

// 子组件, 里面子组件自身的数据  person = {name:'小明'，age:18}
// 通过子组件属性值的方式传递到父组件的插槽中
  

      默认插槽内容1
      默认插槽内容2
  

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

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

  
小明
  
18