SOURCE

Vue.component('component-head', {
  template: '<header>\
              <div class="btn-left">\
                <slot name="btn-left">\
                  <a></a>\
                </slot>\
              </div>\
              <div class="title">{{title}}</div>\
              <div class="btn-right">\
                <slot name="btn-right">\
                  <a></a>\
                </slot>\
              </div>\
            </header>',
  props: ['title']
});
Vue.component('component-solt', {
  template: '<header>\
              <div class="btn-left">\
                <slot name="btn-left">\
                  <a></a>\
                </slot>\
              </div>\
              <slot></slot>\
              <div class="btn-right">\
                <slot name="btn-right">\
                  <a></a>\
                </slot>\
              </div>\
            </header>'
})
Vue.component('component-scope', {
  template: '<div class="child"><slot :message="messages"></slot></div>',
  props: {
    message: {
      type: String,
      default: "hello from child"
    },
    messages: {
      type: Array,
      default: function(){
        return ["message1 from child", 'message2 from child']
      }
    },
  }
})
var vm = new Vue({
  el: '#app',
  data: function(){
    return {
      
    }
  }
})

<div id="app">
  <component-head title="首页">
    <a slot="btn-left">返回</a>
    <a slot="btn-right">帮助</a>
  </component-head>
  <component-solt>
    <a slot="btn-left">返回</a>
    <div class="title">列表页</div>
    <a slot="btn-right">帮助</a>
  </component-solt>
  <div class="parent">
    <component-scope>
      <template scope="props">
        <div>hello from parent</div>
        <div>{{ props.message[1] }}</div>
      </template>
    </component-scope>
  </div>
</div>

html {
  color: #000;
  background: #FFF
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset, img {
  border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal
}

ol, ul {
  list-style: none
}

caption, th {
  text-align: left
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}

q:after, q:before {
  content: ''
}

abbr, acronym {
  border: 0;
  font-variant: normal
}

sup {
  vertical-align: text-top
}

sub {
  vertical-align: text-bottom
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%
}

legend {
  color: #000
}

#yui3-css-stamp.cssreset {
  display: none
}

html {
  font-size: 625%
}

body {
  overflow-x: hidden;
  font-family: arial, tahoma, SimHei;
  background-color: #f2f2f2;
  max-width: 750px;
  margin: 0 auto
}

html, body {
  height: 100%
}

* {
  -webkit-tap-highlight-color: transparent
}

input, img {
  vertical-align: middle;
  -webkit-appearance: none
}

@media screen and (min-width: 320px) {
  html {
    font-size: 100px
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 100px
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 100px
  }
}

@media screen and (min-width: 384px) {
  html {
    font-size: 102.4px
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 106.67px
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 110.4px
  }
}

@media screen and (min-width: 424px) {
  html {
    font-size: 113.07px
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 128px
  }
}

@media screen and (min-width: 540px) {
  html {
    font-size: 144px
  }
}

body {
  font-size: .12rem
}

:not(input, textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none
}

textarea {
  -webkit-touch-callout: initial !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  user-select: text !important
}

header {
  width: 100%;
  max-width: 750px;
  height: 44px;
  line-height: 44px;
  background-color: #353d44;
  font-size: 18px;
  z-index: 10001;
  display: flex;
  display: -webkit-box;
  text-align: center
}

header div {
  width: 100%;
  flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  color: #ffffff
}

header div a {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 15px
}

header div.btn-left {
  flex: 2;
  -webkit-flex: 2;
  -webkit-box-flex: 2
}

header div.btn-right {
  flex: 2;
  -webkit-flex: 2;
  -webkit-box-flex: 2
}