React中的children与Vue中的slot

好久没用写东西了，先说几句闲话，菠萝同学结束了整整5年的北漂生活，收拾行囊来到了南京，开启人生的下一个阶段，换了家国企，框架用的Vue，所有仔细学习学习啦，在此记录记录自己的学习过程

由于之前一直写React，所有在学习的过程中很自然就和react比较了起来，这样也有好处，毕竟自己对React比较熟悉，更容易理解。但是也有坏处，React的设计真的更简洁明了啊。
今天来看Vue的Slot插槽，Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），这和children起到了一样的作用，下面我们来码码不同场景下这俩框架的代码。

一、内容插槽

Vue 怎么写

定义两个组件HelloWorld.vue、Test.vue
然后在HelloWorld.vue组件中引用Test.vue组件

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <Test>
        这里是slot内容
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

<!--Test.vue -->
<template>
  <div>
    <h1>这里是非slot内容</h1>
    <h2>
      <slot></slot>
    </h2>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>

当组件渲染的时候，<slot></slot>会被替换为"这里是slot内容"
插槽内也可以包含任何模板代码，包括HTML，或者是其它组件

React 怎么写

class HelloWorld extends Component {
  render() {
    return (
        <Test>
            这里是slot内容
        </Test>
    )
  }
}

class Test extends Component {
  render() {
    return (
      <div>
        <h1>这里是非slot内容</h1>
        <h2>{this.props.children}</h2>
      </div>
    );
  }
}

二、具名插槽

我理解就是有具体名字的slot组件
使用场景：当我们一个组件里需要多个插槽时

vue怎么写

<div>
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <div class="page">
    <!-- 我们希望把页面内容放这里 -->
  </div>
</div>

这时候，我们就可以使用name属性，slot组件有一个name属性，用于命名插槽

<!--Test.vue -->
<template>
  <div>
    <h1>
      <slot name="header"></slot>
    </h1>
    <h2>
      <slot name="page"></slot>
    </h2>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>

如果一个<slot>不带name属性的话，那么它的name默认为default
在向具名插槽提供内容的时候，我们可以在<template>元素上使用v-slot指令，并以参数的形式提供其名称

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <Test>
      <template v-slot:header>
        这里是slot内容-header
      </template>
      <template v:slot:page>
        <p>这里还是slot内容-page</p>
      </template>
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

v-slot:header可以简写成#header

React 怎么写

React还真没有特定为这个场景定义什么方法或者属性，不过使用props向子组件传递也是够用的

class HelloWorld extends Component {
  render() {
    return (
        <Test header="这里是slot内容-header">
           这里是slot内容-page
        </Test>
    )
  }
}

三、作用域插槽

如果你想要访问 Test 组件中的属性，那么可以使用作用域插槽，我没想明白什么场景下会这样用呢，如果需要访问子组件中的属性，那就把内容写到子组件里呗，何必要在父组件里定义呢
那如果想访问子组件Test的作用域该怎么办呢？
我们把需要传递的内容绑到 <slot> 上，然后在父组件中用v-slot设置一个值来定义我们提供插槽的名字，然后在HelloWorld.vue中接收传过来的值：

<!-- Test.vue -->
<template>
  <div>
    <h1>这里是非slot内容</h1>
    <h2>
      <slot name="header" v-bind:userInfo="user"></slot>
    </h2>
    <p>
      <slot name="page"></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    
  },
  data: () => {
    return {
      user:{
        firstName:"Fan",
        lastName:"Jun"
      }
    }
  }
}
</script>

<!--HelloWorld.vue-->
<template>
  <div class="hello">
    <Test>
      <template v-slot:header="slotProps">
        这里是slot内容{{ slotProps.userInfo.firstName }}
      </template>
      <template #page>
        <p>这里还是slot内容</p>
      </template>
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

v-slot:header="slotProps" 可以简写成 #header="slotProps"
绑定在 <slot> 元素上的特性被称为插槽 prop。在父组件中，我们可以用v-slot 设置一个值来定义我们提供的插槽 prop 的名字，然后直接使用就好了

Emm...先写这么多吧，等我再项目中有使用场景了再来补充，昨天看着很复杂很深奥，今天手敲了一遍代码之后觉着这个slot API是不是有点鸡肋啊，搜索了我们项目代码并没有发现有啥使用场景哎。。。