vue3

13.Vue3/project3/src/App.vue

@@ -11,6 +11,8 @@
 				<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>
 				
 			</div>
 			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">

13.Vue3/project3/src/router/index.ts

@@ -23,6 +23,16 @@ const router = createRouter({
       name: 'refs-parent',
       component: () =>import('../views/Refs-Parent/Father.vue'),
     },
+    {
+        path:'/attrs',
+        name: 'attrs',
+        component: () => import("../views/Attrs/Father.vue")
+    },
+    {
+        path:'/provide',
+        name: 'provide',
+        component: () => import("../views/Provide-inject/Father.vue")
+    },
   ],
 })
 

13.Vue3/project3/src/views/Attrs/Child.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Child</h1>
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon v-bind="$attrs"  />
+  </div>
+</template>
+
+<script setup>
+import GrandSon from './GrandSon.vue'
+import { ref, reactive } from "vue";
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Attrs/Father.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>Attrs</h1>
+    <h3>我有{{car}}辆车</h3>
+    <hr>
+    <hr>
+    <hr>
+    <Child :carNum='car' :a='90' :addCar='addMain' />
+  </div>
+</template>
+
+<script setup>
+import Child from './Child.vue';
+import { ref, reactive} from 'vue'
+let car  = ref(100);
+function addMain(val) {
+  car.value += val;
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Attrs/GrandSon.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <h3>我继承了{{carNum + a}}辆车</h3>
+    <button @click="addCar(10)">增加</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { defineProps } from "vue";
+defineProps(['carNum','a','addCar'])
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Provide-inject/Child.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Child</h1>
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon/>
+  </div>
+</template>
+
+<script setup>
+import GrandSon from "./GrandSon.vue";
+import { ref, reactive } from "vue";
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Provide-inject/Father.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>provide-inject</h1>
+    <p>我有{{sum}}本书</p>
+    <p>
+      我有一辆{{car.c1}},一辆{{car.c2}}
+    </p>
+    <hr>
+    <hr>
+    <hr>
+    <Child />
+  </div>
+</template>
+
+<script setup>
+import Child from './Child.vue';
+import { ref, reactive,provide} from 'vue'
+let sum = ref(10)
+let sum1 = ref(101)
+let car = reactive({
+  c1:'摩托车',
+  c2:'自行车'
+})
+function buyBook(val) {
+  sum.value += val;
+}
+// provide 向后代提供数据
+provide('a',{sum,car,buyBook})
+provide('b',{sum1})
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Provide-inject/GrandSon.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <p>爷爷给了我{{sum}}本书</p>
+    <p>爷爷给了我一辆{{car.c1}}和一辆{{car.c2}}</p>
+    <button @click="buyBook(2)">给爷爷买书</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, inject } from "vue";
+let {sum,car,buyBook} = inject('a')
+console.log( inject('a','demo'))
+console.log( inject('b'),'222')
+</script>
+<style lang="scss" scoped></style>