vue2

vue/高阶/project1/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>第一个</h1>
     <!-- 3.使用组件 -->
-     <Demo1X></Demo1X>
+     <Demo1 ref="getMain"></Demo1>
      <br>
      <Demo2></Demo2>
   </div>
@@ -15,8 +15,26 @@ import Demo2 from './components/Demo2.vue';
 export default {
   // 2.组件的注册
   components:{
-    Demo1X:Demo1,
+    Demo1,
     Demo2
+  },
+  methods:{
+    aa() {
+      console.log("你好");
+    }
+  },
+  mounted() {
+    /**
+     * 父组件：
+     * 1.在想要获取的子组件上绑定ref='xxx'
+     * 2.在挂载的生命周期上绑定事件
+     * this.$refs.xxx.$on("事件名",事件)
+     * 子组件：
+     * 触发:this.$emit("事件名")
+     * 解绑:this.$off("事件名")
+     */
+    this.$refs.getMain.$on("ab",this.aa)
+    console.log(this.$refs.getMain.$on("ab",this.aa));
   }
 }
 </script>

vue/高阶/project1/src/components/Demo1.vue

@@ -6,12 +6,24 @@
       <li>你好</li>
       <li>你好</li>
     </ul>
+    <button @click="getShow">获取父组件的信息</button>
   </div>
 </template>
 
 <script>
 export default {
-
+  name:'Demo1',
+  // mounted() {
+  //    this.$emit('ab')
+  // }
+  methods:{
+    getShow() {
+      this.$emit('ab')
+    }
+  },
+  destroyed(){
+    this.$off("ab");
+  }
 }
 </script>