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>