admin

10_vuecli/helloworld/src/App.vue

@@ -9,7 +9,8 @@
       <!-- 重定向 -->
       <router-link to="/backhome">返回首页</router-link> |
       <!-- 别名 -->
-      <router-link to="/info/200">Info</router-link>
+      <router-link to="/info/200">Info</router-link>｜
+      <router-link to="/pagetwo">页面二</router-link>
 
     </nav>
     <!-- transition 过渡动画 -->

10_vuecli/helloworld/src/components/AddControl.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="box">
+            <h1>{{ title }}</h1>
+            <h1>{{ count }}</h1>
+            <button v-on:click="addFun">加一</button>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'AddControl',
+        data() {
+            return {
+                count: 0
+            }
+        },
+        // props （属性） 用来接收父组件传递过来的数据
+        // 用拟人的方式描述组件间的关系 外层的为父组件 内层的为子组件
+        props:['title'],
+        methods:{
+            addFun(){
+                this.count++;
+                // 子组件可以调用父组件的方法 $emit
+                // $emit 后边为事件名称 事件名称后边为事件传递的参数
+                this.$emit('changeCount',this.count);
+            }
+        }
+    }
+</script>
+<style scoped>
+    .box{
+        width: 300px;
+        height: 300px;
+        border:3px solid black;
+        margin: 0 auto;
+        text-align: center;
+    }
+</style>

10_vuecli/helloworld/src/router/index.js

@@ -50,6 +50,11 @@ const routes = [
     name: 'backhome',
     // 重定向到首页 redirect 路由路径
     redirect: '/'
+  },
+  {
+    path:"/pagetwo",
+    name:"pagetwo",
+    component: () => import('../views/PageTwo.vue')
   }
 ]
 

10_vuecli/helloworld/src/views/PageTwo.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <h1>页面二</h1>
+        <!-- 使用组件仅需 以组件名称为标签名即可 -->
+         <h1> 当前组件内的数字为：{{ msg }}</h1>
+         <!-- 可以为组件自定义事件名称 -->
+        <AddControl v-bind:title="title" v-on:changeCount="childChange" ></AddControl>
+        <AddControl title="累加器2"></AddControl>
+
+    </div>
+</template>
+<script>
+    // 引入组件 import from
+    // import 后边为引入的组件名称 from 后边为组件的地址
+    // vue 中 @ 表示 src 目录
+    import AddControl from '@/components/AddControl.vue'
+    export default {
+        name: 'PageTwo',
+        data(){
+            return {
+                title:'累加器11',
+                msg:""
+            }
+        },
+        methods:{
+            childChange(count){
+                console.log(count);
+                this.msg = count;
+            }
+        },
+        // components （注册组件）
+        components: {
+            // 组件的名称
+            AddControl
+        }
+    }
+</script>