fix:vue

vue2.0/vue高阶/2.归纳.md

@@ -0,0 +1,17 @@
+## 组件通信
+### 1.自定义事件
+1. ref
+    ```  
+    父组件 template标签中 ref="名称<aaa>"
+    mounted() this.$refs.aaa.$on("自定义的方法名<xx>",传送的方法)
+  ```
+    子组件 this.$emit("自定义的方法名<xx>")
+2. 
+```
+    在父组件中 绑定点击事件 @/v-on:click 
+                绑定好事件方法
+    在子组件中 通过this.$emit("监听事件"，传参)
+
+$on 绑定事件
+$emit 监听事件
+$off 解绑事件

vue2.0/vue高阶/hello_vue/src/App.vue

@@ -10,12 +10,18 @@
      -->
     <Demo1 ref="getMain"></Demo1>
     <!-- <button >按钮</button> -->
+    <hr>
+    <Demo3 ref="getThing"></Demo3>
+    <hr>
+    <Demo4 @getName="getName"></Demo4>
   </div>
 </template>
 
 <script>
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
+import Demo3 from './components/Demo3.vue';
+import Demo4 from './components/Demo4.vue';
 export default {
   name:"App",
   data() {
@@ -26,7 +32,9 @@ export default {
   },
   components:{
     Demo1,
-    Demo2
+    Demo2,
+    Demo3,
+    Demo4
   },
   created() {
     console.log(this.day)
@@ -37,11 +45,18 @@ export default {
     },
     showMsg() {
       console.log(this.$refs.aaa,'ref属性')
+    },
+    showMain() {
+      alert("看屏幕")
+    },
+    getName(name) {
+      console.log(name + '吃的真香');
     }
   },
   mounted() {
     this.$refs.getMain.$on("aab",this.aa)
     // console.log(this.$refs.xxx)
+    this.$refs.getThing.$on("happy",this.showMain)
   },
 }
 </script>

vue2.0/vue高阶/hello_vue/src/components/Demo3.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="demo3">
+    <button @click="getHaHa">这是Demo3</button>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+    methods: {
+        getHaHa() {
+            this.$emit("happy");
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+</style>

vue2.0/vue高阶/hello_vue/src/components/Demo4.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="demo4">
+    <button v-on:click="sendName">这是demo4按钮</button>
+    <button @click="cancelSend">失效</button>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name:"LiLi"
+        }
+    },
+    methods: {
+        sendName() {
+            console.log("111")
+            this.$emit("getName",this.name) 
+        },
+        cancelSend() {
+            // 解绑：全部解绑
+            // this.$off();
+            // 指定解绑
+            // this.$off("getName")
+            // 多个解绑
+            this.$off(['getName'])
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

vue2.0/vue高阶/hello_vue/src/components/Demo5.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>