React中的children与Vue中的slot

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

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

一、内容插槽

Vue 怎么写

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

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

React 怎么写

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

class Test extends Component {
  render() {
    return (
      

        
这里是非slot内容
        
{this.props.children}
      
    );
  }
}

二、具名插槽

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

vue怎么写

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

如果一个不带name属性的话，那么它的name默认为default
在向具名插槽提供内容的时候，我们可以在