admin

12_vuecli/myapp/src/App.vue

@@ -14,7 +14,8 @@
       <button @click="goPage">编程式导航</button>
       <router-link to="/testcomp">组件测试</router-link>|
     
-      <router-link to="/lovecoding">lovecoding</router-link>
+      <router-link to="/lovecoding">lovecoding</router-link>|
+      <router-link to="/addcomp">累加器</router-link>
     </nav>
     <!-- router-view 用来展示切换页面的地方 -->
     <div class="content">

12_vuecli/myapp/src/components/AddCompButton.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="add-comp-button">
+        <h1>累加器按钮组件</h1>
+        <button @click="childAddFun">Add</button>
+    </div>
+</template>
+<script>
+export default {
+    methods: {
+        childAddFun(){
+            this.$emit('parentHandle')
+        }
+    },
+}
+</script>

12_vuecli/myapp/src/components/AddCompVal.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="add-comp-val">
+        <h1>累加器内容组件</h1>
+        <h1>当前数值为：{{val}}</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['val']
+}
+</script>

12_vuecli/myapp/src/router/index.js

@@ -61,6 +61,11 @@ const routes = [
       next(true);
     }
   },{
+    path:'/addcomp',
+    name:'addcomp',
+    component:() => import("../views/AddComp.vue")
+  },
+  {
     path:'*',
     name:'error',
     component:() => import("../views/ErrorPage.vue")

12_vuecli/myapp/src/views/AddComp.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="add-comp">
+        <h1>累加器</h1>
+        <AddCompVal :val="num"/>
+        <AddCompButton v-on:parentHandle="parentAddFun"/>
+    </div>
+</template>
+<script>
+// @ 代表 src 目录
+import AddCompButton from "@/components/AddCompButton.vue";
+import AddCompVal from "@/components/AddCompVal.vue";
+export default {
+    data() {
+        return {
+           num:0 
+        }
+    },
+    methods: {
+        parentAddFun(){
+            this.num++;
+        }
+    },
+    components:{
+        AddCompButton,
+        AddCompVal
+    }
+}
+</script>