v-slot以及slot-scop（插槽与作用域插槽）

插槽

vue组件一般都是直接引用并写成单标签，内部不传入任何内容，组件的内容正常情况下是由组件本身去控制的，调用它的组件只能进行数据相关的操作间接的去影响组件的展示，在实际开发中会有需要直接操作被调用组件的展示内容的时候，这个时候就需要使用到插槽。
顾名思义，插槽就像一个预留的槽位一样，在需要的时候可以接入内容：

// demo组件
<template>
    <div>
        <slot name="header"></slot>
        <slot name="body"></slot>
    </div>
</template>

// 调用demo的组件
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Demo>
      <template v-slot:header>
        <h1>hello world</h1>
      </template>
      <template v-slot:body>
        <h1>this is body</h1>
      </template>
    </Demo>
  </div>
</template>

作用域插槽

有些情况下需要我们需要操作子组件的数据，但是数据vue遵循单向数据流，在父组件中没办法拿到子组件的数据，有需要操作数据，这时候就用到了作用域插槽

<template>
    <div>
        <slot name="header" v-bind="someWords">{{ Words }}</slot>
        <slot name="body"></slot>
    </div>
</template>

<script>

export default ({
    data(){
        return {
            someWords: {worlds:'this is slot-scope'}
        }
    }
})
</script>

<template>
  <div id="app">
    <Demo>
      <template v-slot:header='someWords'>
        <h1>hello world, {{ someWords.worlds }}</h1>
      </template>
      <template v-slot:body>
        <h1>this is body</h1>
      </template>
    </Demo>
  </div>
</template>

这样就可以在父组件中获取到子组件的数据了，结合我学react的经验，我觉得作用域插槽很像react中被调用组件约定好要传入props中的一个函数，这个函数返回一个可渲染对象，这时调用这个组件的时候就可以根据预定好的函数名，传入一个函数和一些参数，其本质就是由被调用的组件去调用传入的这个函数。