<template>
<!--
<Main class="cccc"/>
<component-a/>
-->
<slot-demo>
<template #header="slotProps">
<p>插槽标题-{{slotProps.msg}}</p>
</template>
<template v-slot:low>
<p>插槽内容</p>
</template>
</slot-demo>
</template>
<script>
import Main from "@/components/Main.vue";
import ComponentA from "@/components/ComponentA.vue";
import SlotDemo from "@/components/SlotDemo.vue";
export default {
components: {SlotDemo, ComponentA, Main}
}
</script>
<style>
</style>
<template>
<slot name="header" :msg="msg"></slot>
<slot name="low"></slot>
<h3>插槽基础知识</h3>
</template>
<script>
export default {
name: "SlotDemo",
data(){
return{
msg:"子组件元素"
}
}
}
</script>
<style scoped>
</style>
