<template>
  <div class="parent">
    <ul>
      <li @click="setNav(1)">导航一</li>
      <li @click="setNav(2)">导航二</li>
      <li @click="setNav(3)">导航三</li>
    </ul>
    <component v-bind:is="test"></component>
    <slotApp>
      <h1 slot="header">这是一个页面的标题</h1>
      <p>这是段落</p>
      <p>这是另外一个</p>
      <p slot="footer">这是一些联系信息</p>
    </slotApp>
  </div>
</template>
<script>
  import child from '../components/child/child.vue';
  import childB from '../components/childB/childB.vue';
  import childC from '../components/childC/childC.vue';
  import slotApp from '../components/slot/slot.vue';
export default {
    data(){
      return {
          test:'child',
      }
    },
    methods:{
      setNav(nav){
          switch (nav){
            case  1:
              this.test = 'child';
              break;
            case 2:
              this.test = 'childB';
              break;
            case 3:
              this.test = 'childC';
              break;
            default:
              this.test='child';
          }
      }
    },
    components:{
      child,childB,childC,slotApp
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>