具名插槽的使用

对于导航那种组件，一般都使用具名插槽

  

如上图，对于写好的组件，左中右依次替换 

<div id="app">
  <cpn><span>标题</span></cpn>
</div>

<template id="cpn">
  <div>
    <slot><span>左边</span></slot>
    <slot><span>中间</span></slot>
    <slot><span>右边</span></slot>
  </div>
</template>

三个全部修改，因为不知道具体修改的是哪一个  

<div id="app">
  <cpn><span>标题</span></cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

  <cpn><span>标题</span></cpn>只会替换没有名字的

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
</div>