Vue插槽

<div id="app">

	<my-date left-txt="left" center-txt="组件本来的样子" right-txt="right" left-icon="icon-sousuo"></my-date>
	
	<my-date left-txt="←" center-txt="中间" right-txt="→" left-icon="">
		<div class="head-left" slot="Nleft"></div >
	</my-date>
	
	<my-date left-txt="" center-txt="中间" right-txt="" left-icon=""></my-date>
	<my-date left-txt="左" center-txt="" right-txt="右" left-icon="icon-youcecaidan"></my-date>
</div>

Vue.component('my-date',{
	props: {
		leftTxt: String,
		rightTxt: String,
		centerTxt: String,
		leftIcon: String
	},
	template: `
		<div class="head">
			<div v-if="leftTxt.length || leftIcon.length" class="head-left">
				<i v-if="leftIcon.length" class="icon iconfont" :class="leftIcon"></i>
			</div>
			<div v-if="rightTxt.length" class="head-right"></div>
			<div v-if="centerTxt.length" class="head-center"></div>
			<slot name="Nleft"></slot>	
			<slot name="Nright"></slot>	
		</div>
	`
})
new Vue({
	el: '#app',
})