fix:day19

day29/hello/src/App.vue

@@ -1,20 +1,48 @@
 <template>
   <div id="app">
       <!-- 3.使用组件 -->
-      <Demo></Demo>
+      <Demo @wxChat="qq"></Demo>
       <p ref="aaa" @click="showMsg">标签一</p>
       <p ref="bbb">标签二</p>
       <p ref="ccc">标签三</p>
       <!-- 组件通信 -->
       <!-- 子组件 -->
-      <Demos :age="20" name="LiLi" sex="女"></Demos>
+      <Demos :age="20" name="LiLi" sex="女" ref="getAge"></Demos>
       <button @click="showTitle">调用</button>
+      <!-- 自定义事件 -->
+      <newDemo @smile="getSmile"></newDemo>
+      <!-- 
+        第一种：
+        父：
+        在模板中：自定义事件 v-on/@事件名="自定义方法"
+        在方法里：自定义方法（接参）{执行的代码}
+        子：
+        在方法中：this.$emit("监听的事件名",传参)
+        第二种：
+        父：
+        在组件位置：ref="xxx"
+        在方法里：
+        在挂载后周期mounted(){this.$refs.xxx.$on('监听方法',调用的方法)}
+        子:
+        在方法里：this.$emit("监听方法")
+        解绑：
+          this.$off()
+
+
+        $on 提供数据
+        $emit 获取数据
+        $off 解绑数据
+       -->
+       <!-- 
+        全局事件 : main.js => Vue.prototype.$bus = this
+        -->
   </div>
 </template>
 <script>
   // 1.引入组件
 import Demo from '@/components/Demo.vue';
 import Demos from '@/components/Demos.vue';
+import newDemo from '@/components/newDemo';
 // 1.引入mixin
 import {mixin} from './utils/mixin';
   export default {
@@ -27,7 +55,8 @@ import {mixin} from './utils/mixin';
     // 2.注册组件
     components:{
       Demo,
-      Demos
+      Demos,
+      newDemo
     },
     methods:{
       // ref绑定信息 使用方法 ：
@@ -38,7 +67,19 @@ import {mixin} from './utils/mixin';
         console.log(this.$refs.aaa,"信息");
         console.log(this.$refs.bbb,"信息");
         console.log(this.$refs.ccc,"信息");
+      },
+      getSmile(name) {
+        console.log("获得" + name +'的微笑');
+      },
+      qq(name,...prams) {
+        console.log("获得" + name +'的微笑',...prams);
+      },
+      aa() {
+        console.log("成功了")
       }
+    },
+    mounted() {
+      this.$refs.getAge.$on("ab",this.aa)
     }
   }
 </script>

day29/hello/src/components/Demo.vue

@@ -2,6 +2,8 @@
   <div class="demo">
     {{msg}}
     <button @click="show" class="btn">弹出1</button>
+    <button @click="showMsg">聊天</button>
+    <button @click="Unbinding">解绑</button>
   </div>
 </template>
 
@@ -10,14 +12,37 @@ export default {
     name:"Demo",
     data() {
         return{
-            msg:"今天天气真好"
+            msg:"今天天气真好",
+            name: "张振博"
         }
     },
+    computed:{},
     methods:{
       show() {
         alert("我的名字")
-      }
-    }
+      },
+      showMsg() {
+        this.$emit("wxChat",this.name,1,2,3,4,5)
+      },
+      Unbinding() {
+        // 解绑单个文件
+        this.$off("wxChat");
+        // 解绑多个文件
+        this.$off(['wxChat']);
+        // 解绑全部文件
+        this.$off();
+        console.log('解绑了')
+      },
+      demoList() {
+        console.log("陈悠来补课啊",this.name)
+      },
+    },
+    mounted() {
+      this.$bus.$on('demoList',this.demoList)
+    },
+    beforeDestroy() {
+      this.$off("demoList");
+    },
 }
 </script>
 

day29/hello/src/components/Demos.vue

@@ -4,9 +4,11 @@
     <p>名字:{{name}}</p>
     <p>年龄:{{age}}</p>
     <p>性别:{{sex}}</p>
+    <button @click="getMain">年龄</button>
+    <button @click="getDemo">接收Demo组件</button>
   </div>
 </template>
-
+n 
 <script>
 export default {
     name:"Demos",
@@ -42,6 +44,14 @@ export default {
         return {
             msg:"个人信息页面"
         }
+    },
+    methods:{
+        getMain() {
+            this.$emit("ab")
+        },
+        getDemo() {
+            this.$bus.$emit("demoList")
+        }
     }
 }
 </script>

day29/hello/src/components/newDemo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    自定义事件
+    <button @click="getMain">获取微笑</button>
+  </div>
+</template>
+
+<script>
+export default {
+    name:"newDemo",
+    data() {
+        return {
+            name:"马琛",
+        }
+    },
+    methods:{
+        getMain() {
+            this.$emit("smile",this.name)
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

day29/hello/src/main.js

@@ -15,5 +15,8 @@ Vue.mixin(mixin)
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  beforeCreate() {
+    Vue.prototype.$bus = this;
+  }
 }).$mount('#app')

day29/安装步骤.md

@@ -11,4 +11,4 @@
 ## 3.父子组件通信 
     父组件向子组件传值
 ## 4.样式隔断 scss写法
-## 5.混合mixin
+## 5.混合mixin 创建一个utils文件夹