vue2

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

@@ -4,7 +4,9 @@
     <!-- 3.使用组件 -->
      <Demo1 ref="getMain"></Demo1>
      <br>
-     <Demo2  :age="3" :dd="xxx"></Demo2>
+     <Demo2 name="aa" :age="3" :dd="xxx"></Demo2>
+     <hr>
+     <Demo3 @getXX="getThing"></Demo3>
   </div>
 </template>
 
@@ -12,6 +14,7 @@
 // 1.组件的引入
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
+import Demo3 from './components/Demo3.vue';
 export default {
     data() {
         return {
@@ -21,11 +24,15 @@ export default {
   // 2.组件的注册
   components:{
     Demo1,
-    Demo2
+    Demo2,
+    Demo3
   },
   methods:{
     aa() {
       console.log("你好");
+    },
+    getThing(x) {
+      console.log("触发事件" + x);
     }
   },
   mounted() {

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

@@ -22,7 +22,8 @@ export default {
     props:{
         name:{
             type:String,
-            required: false
+            required: false,
+            default:"未知用户"
         },
         age:{
             type:Number,

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo3">
+    <hr>
+    <h1>第三个</h1>
+    <button @click="sendThing">触发</button>
+    <button @click="cancleThing">取消事件</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods:{
+    sendThing() {
+      this.$emit("getXX",20)
+    },
+    cancleThing() {
+      this.$off()
+      // this.$off("getXX")
+      // this.$off(['xxx','xxx'])
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>