完成自定义组件的学习，接下来需要在todolist项目中实践

20_脚手架/vue_code/09.自定义事件/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="app">
+    <h1>{{ msg }}{{stuName}}</h1>
+    <!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
+    <School :getSchoolName="getSchoolName"/>
+    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式  -->
+    <!--    <Student v-on:studentName="getStudentName"/>-->
+    <Student @studentName="getStudentName" @demo="method1" @click.native="show"/>
+    <!--    <Student @studentName.once="getStudentName"/>-->
+    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式  -->
+    <!--    <Student ref="student"/>-->
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  },
+  data() {
+    return {
+      msg: "Hello:",
+      stuName: ""
+    }
+  },
+  methods: {
+    getSchoolName(schoolName) {
+      console.log("获取学校名称", schoolName)
+    },
+    getStudentName(name, ...params) {
+      console.log("getStudentName", name, params)
+      this.stuName = name
+    },
+    method1() {
+      console.log("demo自定义事件被调用！")
+    },
+    show() {
+      alert("组件点击事件")
+    }
+  },
+  mounted() {
+    // 正常写法
+    // this.$refs.student.$on("studentName", this.getStudentName)
+    // 可以设置只执行一次
+    // 可以加延时
+    // this.$refs.student.$once("studentName", this.getStudentName)
+    // setInterval(() => {
+    //   this.$refs.student.$on("studentName", this.getStudentName)
+    // }, 3000)
+  }
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 15px
+}
+</style>

20_脚手架/vue_code/09.自定义事件/components/School.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+<!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
+    <button @click="sendSchoolName">把学校名称传给App</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  props: ["getSchoolName"],
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+    }
+  },
+  methods: {
+    sendSchoolName() {
+      this.getSchoolName(this.name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: skyblue;
+  padding: 15px
+}
+</style>
+

20_脚手架/vue_code/09.自定义事件/components/Student.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="student">
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+    <h2>当前序号：{{number}}</h2>
+    <button @click="sendStudentName">把学生名称传给App</button>
+    <button @click="unbind">解绑studentName事件</button>
+    <button @click="death">销毁当前Student组件的实例</button>
+    <button @click="num">number+1</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18,
+      number: 0
+    }
+  },
+  methods: {
+    sendStudentName() {
+      // 触发Student组件实例上的studentName事件
+      this.$emit("studentName", this.name, 666, 777, 888)
+      this.$emit("demo")
+    },
+    unbind() {
+      // this.$off("studentName")  // 解绑单个自定义事件
+      this.$off(["studentName", "demo"])  // 解绑多个自定义事件
+      this.$off()  // 解绑全部自定义事件
+    },
+    death() {
+      this.$destroy()  // 销毁当前Student组件的实例
+    },
+    num() {
+      console.log("num被调用")
+      this.number++
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.student {
+  background-color: pink;
+  padding: 15px;
+  margin-top: 20px;
+}
+</style>
+

20_脚手架/vue_code/09.自定义事件/main.js

@@ -0,0 +1,16 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')

20_脚手架/vue_code/src/App.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="app">
-    <h1>{{ msg }}</h1>
+    <h1>{{ msg }}{{stuName}}</h1>
     <!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
     <School :getSchoolName="getSchoolName"/>
     <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式  -->
     <!--    <Student v-on:studentName="getStudentName"/>-->
-    <!--    <Student @studentName="getStudentName"/>-->
+    <Student @studentName="getStudentName" @demo="method1" @click.native="show"/>
+    <!--    <Student @studentName.once="getStudentName"/>-->
     <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式  -->
-    <Student ref="student"/>
+    <!--    <Student ref="student"/>-->
   </div>
 </template>
 
@@ -23,7 +24,8 @@ export default {
   },
   data() {
     return {
-      msg: "Hello:"
+      msg: "Hello:",
+      stuName: ""
     }
   },
   methods: {
@@ -32,12 +34,18 @@ export default {
     },
     getStudentName(name, ...params) {
       console.log("getStudentName", name, params)
-
+      this.stuName = name
+    },
+    method1() {
+      console.log("demo自定义事件被调用！")
+    },
+    show() {
+      alert("组件点击事件")
     }
   },
   mounted() {
     // 正常写法
-    this.$refs.student.$on("studentName", this.getStudentName)
+    // this.$refs.student.$on("studentName", this.getStudentName)
     // 可以设置只执行一次
     // 可以加延时
     // this.$refs.student.$once("studentName", this.getStudentName)

20_脚手架/vue_code/src/components/Student.vue

@@ -2,7 +2,11 @@
   <div class="student">
     <h2>学生名称：{{ name }}</h2>
     <h2>学生年龄：{{ age }}</h2>
+    <h2>当前序号：{{number}}</h2>
     <button @click="sendStudentName">把学生名称传给App</button>
+    <button @click="unbind">解绑studentName事件</button>
+    <button @click="death">销毁当前Student组件的实例</button>
+    <button @click="num">number+1</button>
   </div>
 </template>
 
@@ -13,12 +17,26 @@ export default {
     return {
       name: "小强",
       age: 18,
+      number: 0
     }
   },
   methods: {
     sendStudentName() {
       // 触发Student组件实例上的studentName事件
       this.$emit("studentName", this.name, 666, 777, 888)
+      this.$emit("demo")
+    },
+    unbind() {
+      // this.$off("studentName")  // 解绑单个自定义事件
+      this.$off(["studentName", "demo"])  // 解绑多个自定义事件
+      this.$off()  // 解绑全部自定义事件
+    },
+    death() {
+      this.$destroy()  // 销毁当前Student组件的实例
+    },
+    num() {
+      console.log("num被调用")
+      this.number++
     }
   }
 }