From 9a3390180398498e244d5d21126f421aa60c3afa Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 5 Jan 2025 10:15:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=BB=84=E4=BB=B6=E9=80=9A?=
 =?UTF-8?q?=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/web/vue-project/src/App.vue            | 20 ++++++++++++++--
 .../vue-project/src/components/HelloWorld.vue | 24 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/skills/web/vue-project/src/App.vue b/skills/web/vue-project/src/App.vue
index da27d18..f999b40 100644
--- a/skills/web/vue-project/src/App.vue
+++ b/skills/web/vue-project/src/App.vue
@@ -1,6 +1,20 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import { provide, ref } from 'vue';
+
+const title = ref('You did it')
+
+const username = ref('will')
+provide('username', username)
+
+// v-mode 帮你处理来
+// update:modelValue
+// @update:modelValue=changedHandler
+// const changedHandler = (v) => {
+//   title.value = v
+// }
+
 </script>
 
 <template>
@@ -8,9 +22,11 @@ import HelloWorld from './components/HelloWorld.vue'
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it, this is my arg!" />
+      <!-- modelValue -->
+      <HelloWorld v-model:msg="title" />
       <!-- <component></component> -->
-      
+      <hr>
+      <input style="width: 400px;" v-model="username" type="text">
       <nav>
           <RouterLink to="/">Home</RouterLink>
           <RouterLink to="/about">About</RouterLink>
diff --git a/skills/web/vue-project/src/components/HelloWorld.vue b/skills/web/vue-project/src/components/HelloWorld.vue
index 582cbc3..3d1a5fe 100644
--- a/skills/web/vue-project/src/components/HelloWorld.vue
+++ b/skills/web/vue-project/src/components/HelloWorld.vue
@@ -1,4 +1,7 @@
 <script setup>
+
+import { inject, ref, watch } from 'vue';
+
 // func XXXX(msg: string)
 const pros = defineProps({
   msg: {
@@ -9,6 +12,24 @@ const pros = defineProps({
 
 
 
+
+// 通过父组件, 修改msg, 回调函数/事件
+// {'changed': fn, 'xxxx': fn}
+// @changed=()=>{} @xxxx=()=>{}
+// emit 事件总线 emit('changed', x, y, z)
+// 调用事件总线，发送事件
+// fn(args)
+const emit = defineEmits(['update:msg'])
+
+const inputText = ref(pros.msg)
+watch(inputText, (v, ov)=> {
+  emit("update:msg", v)
+}, {immediate: true})
+
+
+//
+const username = inject('username')
+
 </script>
 
 <template>
@@ -19,6 +40,9 @@ const pros = defineProps({
       <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
       <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
     </h3>
+    <input style="width: 400px;" v-model="inputText" type="text">
+    <hr>
+    <span>username: {{ username }}</span>
   </div>
 </template>