面试题39：Vue的普通Slot以及作用域Slot的区别

普通插槽
普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。

作用域插槽
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。
 

// 有name的属于具名插槽，没有name属于匿名插槽
<app>
  <div slot="a">xxxx</div>
  <div slot="b">xxxx</div>
</app>
<slot name="a"></slot>
<slot name="b"></slot>
 
普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面
作用域插槽渲染是在子组件里面

1.插槽slot

在渲染父组件的时候，会将插槽中的先渲染。

创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿 子进行分类 {a:[vnode],b[vnode]}渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件，插槽中HTML模板显示不显示、以及怎样显示由父组件来决定）

有name的父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

2.作用域插槽slot-scope

作用域插槽在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。

或者可以说成作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件。（插槽的作用域为子组件）
 

子组件：
<slot :nickName="'wthreesix'"></slot>
 
父组件：
<slot-child>
  <template slot-scope="scope">
     <div>{{scope.nickName}}</div>
  </template>
</slot-child>