vue动态组件和slot插槽

<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>