vue3

11.vue3/vue-project2/src/views/Provide-inject/Child.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     子级
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon></GrandSon>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import {ref,reactive, inject} from "vue" 
+import GrandSon from "./GrandSon.vue";
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Provide-inject/Father.vue

@@ -1,12 +1,23 @@
 <template>
   <div>
-    父级
+    <h1>provide-inject</h1>
+    <p>我有{{ sum }}本书</p>
+    <hr>
+    <hr>
+    <hr>
+    <Child></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import {ref,reactive, provide} from "vue" 
+import Child from "./Child.vue";
+let sum = ref<number>(100);
+let newSum = ref(sum.value/2)
+function buyBook(val:number) {
+  sum.value += val;
+}
+provide('aa',{newSum,buyBook})
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Provide-inject/GrandSon.vue

@@ -1,13 +1,17 @@
+
+<script lang="ts" setup>
+import {ref,reactive, inject} from "vue" 
+let {newSum,buyBook} = inject("aa")
+console.log(inject("aa"))
+</script>
 <template>
   <div>
     孙级
+    <p>爷爷给了我{{ newSum }}本书</p>
+    <button @click="buyBook(2)">给爷爷买书</button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
-</script>
 
 <style lang="scss" scoped>
 </style>

11.vue3/vue-project2/src/views/Refs-Parent/Child1.vue

@@ -1,10 +1,22 @@
 <template>
-  <div>子级</div>
+  <div>
+    <h1>Child1</h1>
+    <p>我有{{ book }}本书</p>
+    <p>我有{{ money }}元</p>
+    <button @click="giveBook($parent)">给父亲书</button>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import { ref, reactive } from "vue";
+let book = ref(100);
+let money = ref(69000);
+function giveBook(val: any) {
+  console.log(val);
+  val.num++;
+  book.value--;
+}
+defineExpose({ book, money });
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Refs-Parent/Child2.vue

@@ -1,10 +1,16 @@
 <template>
-  <div>子级</div>
+  <div>
+    <h1>Child2</h1>
+    <p>我有{{ flower }}朵花</p>
+    <p>我有{{  money}}元</p>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+let flower = ref(70);
+let money = ref(70000)
+defineExpose({flower,money})
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Refs-Parent/Father.vue

@@ -1,12 +1,42 @@
 <template>
   <div>
-    父级
+    <h1>$refs-$parent</h1>
+    <p>孩子给了我{{ num }}书</p>
+    <button @click="changeChild1">改变老大的书</button>
+    <button @click="changeChild2">改变老二的花</button>
+    <button @click="saveMoney($refs)">保管压岁钱</button>
+    <hr />
+    <hr />
+    <Child1 ref="c1"></Child1>
+    <hr />
+    <hr />
+    <hr />
+    <Child2 ref="c2"></Child2>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import { ref, reactive } from "vue";
+import Child1 from "./Child1.vue";
+import Child2 from "./Child2.vue";
+let c1 = ref();
+let c2 = ref();
+let num = ref(0);
+function changeChild1() {
+  console.log(c1.value);
+  c1.value.book -= 1;
+}
+function changeChild2() {
+  console.log(c2.value);
+  c2.value.flower -= 1;
+}
+function saveMoney(val: { [propName: string]: any }) {
+  console.log(val);
+  for (let key in val) {
+    val[key].money -= 1000;
+  }
+}
+defineExpose({ num });
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Slot1/Part1.vue

@@ -1,8 +1,15 @@
 <template>
-  <div>Part1</div>
+  <div>
+    <h1>默认插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>今天星期四</Part2>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import Part2 from "./Part2.vue";
 import {ref,reactive} from "vue" 
 
 </script>

11.vue3/vue-project2/src/views/Slot1/Part2.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>Part2</div>
+  <div>
+    <h3>Part2</h3>
+    <hr>
+    <hr>
+    你好
+    <hr>
+    <slot>默认</slot>
+    <hr>
+    哈
+  </div>
 </template>
 
 <script lang="ts" setup>

11.vue3/vue-project2/src/views/Slot2/Part1.vue

@@ -1,8 +1,25 @@
 <template>
-  <div>Part1</div>
+  <div>
+    <h1>具名插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template #footer>
+      <h1>今天天气真好</h1>
+      </template>
+      <template v-slot:header>
+      <h1>今晚月色真美</h1>
+      </template>
+      <template v-slot:default>
+      <h1>风也温柔</h1>
+      </template>
+    </Part2>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import Part2 from "./Part2.vue";
 import {ref,reactive} from "vue" 
 
 </script>

11.vue3/vue-project2/src/views/Slot2/Part2.vue

@@ -1,5 +1,16 @@
 <template>
-  <div>Part2</div>
+  <div>
+    <h3>Part2</h3>
+    <hr>
+    <hr>
+    <slot name="header"></slot>
+    你好
+    <hr>
+    <slot>默认</slot>
+    <hr>
+    哈
+    <slot name="footer"></slot>
+  </div>
 </template>
 
 <script lang="ts" setup>

11.vue3/vue-project2/src/views/Slot3/Part1.vue

@@ -1,8 +1,30 @@
 <template>
-  <div>Part1</div>
+  <div>
+    <h1>作用域插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+     <template v-slot:footer='{list2}'>
+      <ul>
+        <li v-for="(item,index) in list2" :key="index">
+          {{ item.name }}
+        </li>
+      </ul>
+     </template>
+     <template v-slot:header='{list1}'>
+      <ul>
+        <li v-for="(item,index) in list1" :key="index">
+          {{ item.desc }}
+        </li>
+      </ul>
+     </template>
+    </Part2>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import Part2 from "./Part2.vue";
 import {ref,reactive} from "vue" 
 
 </script>

11.vue3/vue-project2/src/views/Slot3/Part2.vue

@@ -1,10 +1,36 @@
 <template>
-  <div>Part2</div>
+  <div>
+    <h3>Part2</h3>
+    <hr>
+    <hr>
+    <slot name="header" :list1="list"></slot>
+    你好
+    <hr>
+    <hr>
+    哈
+    <slot name="footer" :list2="list"></slot>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+let list = reactive([
+  {
+    id:1,
+    name: '孙悟空',
+    desc:"金箍棒"
+  },
+  {
+    id:2,
+    name: '哪吒',
+    desc:'乾坤圈'
+  },
+  {
+    id:3,
+    name: '猪八戒',
+    desc:"九齿钉耙"
+  },
+])
 </script>
 
 <style lang="scss" scoped>