web250825/vue3/project5/src/App.vue

<template>
	<div class="container-fluid wraper">
		<h1 class="title">
			Vue3 组件间通信
		</h1>
		<hr>
		<div class="row">
			<div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
				<!-- 导航区 -->
				<RouterLink active-class="active" class="list-group-item" to="/props">1. props</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/custom">2. custom</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/mitt">3. mitt</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/refs-parent">4. refs-parent</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/attrs">5. $attrs</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/provide">6. provide-inject</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/slot1">7. 默认插槽</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/slot2">8. 具名插槽</RouterLink>
				<RouterLink active-class="active" class="list-group-item" to="/slot3">9. 作用域插槽</RouterLink>
			</div>
			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
				<div class="panel-body">
					<!-- 占位一个展示区 -->
					<RouterView></RouterView>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="App">
import {RouterView,RouterLink} from 'vue-router'
</script>

<style>
.title {
  color:green
}
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
  /* .active {
    background: red;
  } */
</style>