slot

插槽
是为了解决组件个性化的问题，给可复用组件预留插槽，让调用的时候再插入内容
先创建一个组件HelloWorld，在创建的时候，在需要预留的地方加入<slot></slot>
然后在父组件里调用这个组件，中间插入内容，默认替代slot

子组件内容
<div>
    <h1>{{ msg }}</h1>
    <slot></slot>
  </div>

下面是父组件调用子组件，插入内容代替插槽
<div>
    <HelloWorld>
        <div>替代slot的内容部分</div>
    </HelloWorld>
  </div>

具名插槽，一个组件里有多个slot的时候，给每个slot一个name属性
然后插入的内容上，加一个slot=“xxx”就可以替代对应的插槽

<div>
    <h1>{{ msg }}</h1>
    <slot name="left"></slot>
    <slot name="right"></slot>
  </div>

<HelloWorld>
    <div slot="left">替代slot left</div>
    <div slot="right">替代slot right</div>
</HelloWorld>