vue组件通信

20.vue3/project3/package.json

@@ -11,7 +11,9 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.3.2",
     "sass": "^1.101.0",
+    "tailwindcss": "^4.3.2",
     "vue": "^3.5.38",
     "vue-router": "^5.1.0"
   },

20.vue3/project3/src/App.vue

@@ -1,13 +1,69 @@
 <template>
-  <div>
-    <h1>Vue3组件通信</h1>
+  <div class="text-xl">
+    <h1
+      class="text-5xl font-bold text-purple-600 text-center h-32 leading-[128px]"
+    >
+      Vue3组件通信
+    </h1>
     <hr />
-    <div class="main">
-      <div class="nav">
-        <RouterLink to="/props">1.props</RouterLink>
-        <RouterLink to="/custom">2.custom</RouterLink>
+    <div class="flex p-6">
+      <div class="w-64 flex flex-col">
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/props"
+          >1.props</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/custom"
+          >2.custom</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/mitt"
+          >3. mitt</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/refs"
+          >4.refs-parent</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/attrs"
+          >5. $attrs</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/provide"
+          >6. provide-inject</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/slot1"
+          >7. 默认插槽</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/slot2"
+          >8. 具名插槽</RouterLink
+        >
+        <RouterLink
+          active-class="active"
+          class="border h-12 flex justify-center items-center"
+          to="/slot3"
+          >9. 作用域插槽</RouterLink
+        >
       </div>
-      <div class="content">
+      <div class="flex-1 ml-8">
         <RouterView></RouterView>
       </div>
     </div>
@@ -19,22 +75,8 @@ import { ref, reactive } from "vue";
 </script>
 
 <style lang="scss" scoped>
-h1 {
-  text-align: center;
-  color: plum;
-}
-.main {
-  display: flex;
-  .nav {
-    width: 260px;
-    height: 300px;
-    background: #f00;
-  }
-  .content {
-    flex: 1;
-    margin-left: 30px;
-    height: 600px;
-    background: #ff0;
-  }
+.active {
+  background: plum;
+  color: #fff;
 }
 </style>

20.vue3/project3/src/assets/main.css

@@ -1,4 +1,4 @@
-@import './base.css';
+/* @import './base.css';
 
 #app {
   max-width: 1280px;
@@ -32,4 +32,5 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
-}
+} */
+@import "tailwindcss";

20.vue3/project3/src/main.ts

@@ -1,9 +1,7 @@
-// import './assets/main.css'
-
+import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-
 const app = createApp(App)
 
 app.use(router)

20.vue3/project3/src/views/Props/Father.vue

@@ -1,11 +1,23 @@
 <template>
   <div>
-    <h1>Props</h1>
+    <h1 class="h-26 text-6xl">Props</h1>
+    <h3 class="h-16 text-4xl">我有{{ flower }}朵花</h3>
+    <h3 class="h-16 text-4xl">我收到了孩子给我的{{ num }}瓶酒</h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Child :aa="flower - 8" :sendWine="changeNum"></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+import Child from "./index.vue";
+let flower = ref(10);
+let num = ref(0);
+function changeNum(val: number) {
+  num.value = val;
+}
 </script>
 
 <style lang="scss" scoped>

20.vue3/project3/src/views/Props/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h2>子组件</h2>
+    <div>父组件给了我{{ aa }}朵花</div>
+    <button @click="sendWine(wine)">给父亲酒</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+let wine = ref(10);
+defineProps(["aa", "sendWine"]);
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/vite.config.ts

@@ -3,12 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    tailwindcss(),
   ],
   resolve: {
     alias: {