vue仿美团饿了么，不同页面顶部样式相同，标题不同

顶部标题，在多个页面样式相同，文字不同，也可以用公共组件的形式


如图所示，写一个公共头部组件，headTop

 <header class="foodHeader">
		<slot name='left'></slot>
  	<!-- <div class="headLeft"><i class="mui-icon mui-icon-search"></i></div> -->
		<div class="headTitle">{{title}}</div>
  	<!-- <div class="headRight">
  		<span><router-link to='/'>登录|注册</router-link></span>
  	</div> -->
		<slot name='right'></slot>
  </header>

上图中首页是有三个部分，底下订单只有一个部分（标题）,slot的用法，具体百度，大致相当于一个插槽，使用的时候，在div中写slot=""，值为公共组件中的name属性中写的值。
文字的不同，可以用data中的变量title，在公共组件headTop中通过props

 props:{
  	title:String
  }

使用的时候，直接在title中写入即可

<headTop title='上海市'>
		<div class="headLeft" slot='left'><i class="mui-icon mui-icon-search" @click="jumpTo('/search')"></i></div>
		<div class="headRight" slot='right'>
			<span><router-link to='/self'>登录|注册</router-link></span>
		</div>
	</headTop>