Mon Apr 8 17:21:00 CST 2024 inscode

src/App.vue

 <script setup>
+import { ref } from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+// 动态插槽 默认值
+const defaultCom = ref('header')
 </script>
 
 <template>
@@ -8,12 +11,28 @@ import TheWelcome from './components/TheWelcome.vue'
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+      <!-- 插槽使用 -->
+      <HelloWorld msg="You did it!">
+        <!-- v-slot:name : <template v-slot:default="slotProps">父组件传递的插槽内容！--default子组件属性：curLang {{ slotProps?.lang }}</template> -->
+        <!-- 直接写的内容，会到默认无名插槽内 -->
+        <!-- v-slot:name 简写为 #name : <template #default="slotProps">父组件传递的插槽内容！--default子组件属性：curLang {{ slotProps?.lang }}</template> -->
+        <template #default="{ lang }">父组件传递的插槽内容！--default子组件属性：curLang {{ lang }}</template>
+        <!-- 具名插槽 -->
+        <!-- v-slot:name : <template v-slot:header="headerProps">父组件传递的插槽内容！--header子组件属性：curLang {{ headerProps?.lang }}</template> -->
+        <!-- v-slot:name 简写为 #name :  <template #header="headerProps">父组件传递的插槽内容！--header子组件属性：curLang {{ headerProps?.lang }}</template> -->
+        <!-- 作用域插槽 -->
+        <template #header="{ lang }">父组件传递的插槽内容！--header子组件属性：curLang {{ lang }}</template>
+        <!--  <template v-slot:footer="footerProps">父组件传递的插槽内容！--footer子组件属性：curLang {{ footerProps?.lang }}</template> -->
+        <!-- v-slot:name 简写为 #name : <template #footer="footerProps">父组件传递的插槽内容！--footer子组件属性：curLang {{ footerProps?.lang }}</template> -->
+      <template #footer="{ lang }">父组件传递的插槽内容！--footer子组件属性：curLang {{ lang }}</template>
+      <!-- 动态插槽 -->
+        <!-- <template #[defaultCom]>父组件传递的插槽内容！--{{ defaultCom }}子组件属性：curLang {{ lang }}</template> -->
+      </HelloWorld>
     </div>
   </header>
 
   <!-- <main>
-    <TheWelcome />
+      <TheWelcome />
   </main> -->
 </template>
 

src/components/HelloWorld.vue

 <script setup>
+import { ref, watchEffect } from 'vue'
 import { useI18n, } from 'vue-i18n'
 const { t, locale } = useI18n()
 defineProps({
@@ -7,14 +8,18 @@ defineProps({
     required: true
   }
 })
-
+const curLang = ref($t.locale.value)
 const handleChange = (param) => {
   console.log('handleChange', param);
   let elem = document.querySelector('#toggle');
   let currentVal = ['zh_CN', 'zh_HK', 'en_US'][elem.selectedIndex]
   console.log('handleChange', elem, elem.selectedIndex, currentVal);
+  curLang.value = currentVal;
   setLang(currentVal)
 }
+watchEffect(() => {
+  console.log('curLang', curLang.value);
+})
 console.log('================================');
 console.log(t('title'));
 console.log($t.t('title'));
@@ -24,11 +29,11 @@ console.log('================================');
 <template>
   <div class="greetings">
     <!-- <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3> -->
+                        <h3>
+                          You’ve successfully created a project with
+                          <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+                          <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+                        </h3> -->
     <select name="language" id="toggle" @change="handleChange">
       <option value="zh_CN">简体中文</option>
       <option value="zh_HK">繁體中文</option>
@@ -36,6 +41,9 @@ console.log('================================');
     </select>
     <p>{{ $t('title') }}</p>
     <p>{{ $t('content') }}</p>
+    <slot :lang="curLang">默认插槽值</slot>
+    <slot name="header" :lang="curLang">header插槽值</slot>
+    <slot name="footer" :lang="curLang">footer插槽值</slot>
   </div>
 </template>