Vue之slot分发内容

在单页面应用中，例如头部header组件，在不同的页面显示的可能内容不同，例如在下列选择城市和搜索城市页面的header组件内容便显示的不一样，图片如下：
一、

二、

这里用slot十分合适，header组件仅仅定义大小和背景，里面不添加任何内容通过slot来分发，在调用header的A组件里面使用slot定义分发该页面对应的内容，然后当A组件在页面中显示时，header组件里显示A组件里slot分发的内容，如下：
一、选择城市组件select.vue：

template：

<headVue>
        <span slot="logo-name">饿了么</span>
        <img src="../../common/img/head-logo.png" slot="logo">
</headVue>

二、搜索地址组件research.vue：
template：

<headVue>
        <router-link to="/select" slot="back">
          <span><</span>
        </router-link>
        <span slot="logo-name" class="research">搜索</span>
</headVue>

三，header组件里通过slot的name属性来显示相应内容：
template：

<div class="head-wrap">
    <slot name="logo-name"></slot>
    <slot name="logo"></slot>
    <slot name="back"></slot>
    <slot name="research"></slot>
</div>

上面在header组件里写四个slot并给不同的name是为了看的更清楚，其实不必如此，因为我们两个组件各自内部只用到了两个slot来分发内容，所以header组件里只需要写两个slot即可。

这里说明一下，当前组件A加载（或显示）在网页上时，A组件内slot分发的内容才会才header组件里显示，而组件A没有被当前网页显示时，A组件内slot分发的内容自然也不会在header组件里显示，所以上面代码可以稍加简化：
一、选择城市组件select.vue：

template：

<headVue>
        <span slot="A">饿了么</span>
        <img src="../../common/img/head-logo.png" slot="B">
</headVue>

二、搜索地址组件research.vue：
template：

<headVue>
        <router-link to="/select" slot="A">
          <span><</span>
        </router-link>
        <span slot="B" class="research">搜索</span>
</headVue>

三，header组件里通过slot的name属性来显示相应内容：
template：

<div class="head-wrap">
    <slot name="A"></slot>
    <slot name="B"></slot>
</div>