匿名插槽和具名插槽的使用

注意：如果有具名插槽和匿名插槽在一起时，匿名插槽要加上#default，否则会有警告。

---

目录

问题截图

问题代码截图

效果

代码

实现效果

父组件

子组件

---

问题截图

问题代码截图

效果

代码

实现效果

父组件

<script setup>
	// This starter template is using Vue 3 <script setup> SFCs
	// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
	import HelloWorld from './components/HelloWorld.vue'
	import Identify from './components/indentify_total.vue'
	import Test from './components/Test.vue'
	// import Count from './components/count.vue'
</script>

<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
	<!--  <Count @codeSent="handleCodeSent"/> -->
	<!-- <Identify/> -->
	<Test>
		<!-- 默认插槽 -->
		<template #default>
			<p>我是默认插槽的内容</p>
			<p>我是默认插槽的内容</p>
		</template>

		<!-- 具名插槽 -->
		<template #haha>
			<b>我是具名插槽haha的内容</b>
			<button>具名插槽的按钮</button>
		</template>
	</Test>
</template>

<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>
	<slot></slot>
	<slot name="haha"></slot>
</template>

<script>
</script>

<style>
</style>