<template>
<div id="app">
<hello>
<template v-slot:header>
<div>{{msg}}</div>
</template>
<template v-slot:body>
<div>我是内容部分</div>
</template>
<template v-slot:footer>
<div>我是底部</div>
</template>
<template v-slot:default="slotProps">
<h3>{{slotProps.demo}}</h3>
</template>
</hello>
<DyMy />
</div>
</template>
<script>
import hello from "./components/hello.vue"
import DyMy from "./components/DyMy.vue"
export default {
name: 'App',
data(){
return{
msg:"我是头部"
}
},
methods:{
},
components: {
hello,
DyMy,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div>
<h3>我是动态组件</h3>
<button @click="changeViewHandle">切换视图显示</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import child1 from "./child1"
import child2 from "./child2"
export default {
data(){
return{
currentComponent:child1
}
},
methods:{
changeViewHandle(){
if(this.currentComponent===child1){
this.currentComponent=child2
}else{
this.currentComponent=child1
}
}
},
components: {
child1,
child2,
},
}
</script>
<style>
</style>
第一段代码是App.vue,第二个是DyMy.vue,视频15分钟的时候,讲动态组件的时候按照视频上写的代码,控制台有警告,为啥与视频一样会有警告呢?
