day79-组件自定义事件

组件自定义事件

一种组件间通信的方式，适用于：子组件==> 父组件

a是父组件，b是子组件，b想传递数据给a，就要在a中给b绑定自定义事件，事件的回调在a中

子组件

school组件

通过prop传递自定义事件函数

<template>
   <div class="school">
     <h2>学校名称：{{name}}</h2>
     <h2>学校地址：{{address}}</h2>
     <button @click="sendSchoolName()">把学校名字给app</button>
   </div>
 </template>
 ​
 <script>
 ​
 export default {
   name:'SchoolMsg',
   props:['getSchoolName'],
   data(){
     return{
       name:'中南atchangsha',
       address:'changsha'
     }
   },
   methods:{
     sendSchoolName(){
       this.getSchoolName(this.name)
     }
   }

 

student组件

自定义事件传递，在app中自定义了atgugu事件

<template>
   <div class="student">
     <h2>学生姓名：{{name}}</h2>
     <h2>学生性别：{{sex}}</h2>
     <button @click="sendStudentName()">把学生名字给app</button>
     <button @click="unbind">解绑事件</button>
     <button @click="death">消除当前student的实例vc</button>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       name: '张三',
       sex: 'boy'
     }
   },
   methods:{
     sendStudentName(){
       //触发student组件实例身上的atgugu事件
       this.$emit('atgugu',this.name)
       // this.$emit('demo')
 ​
     },
     unbind(){
       this.$off('atgugu')
       //解绑一个自定义标签
       // this.$off(['atgugu','demo'])
       //解绑多个自定义标签
       // this.$off()
       //解绑所有自定义标签
     },
     death(){
       this.$destroy()
       //消除当前student的实例vc,销毁后，所有student实例的自定义事件都失效了
     }
   }
 ​
 }
 </script>
 ​
 <style scoped>
   .student{
     background-color: orange;
     padding: 5px;
     margin-top: 30px;
   }
 </style>

 

自定义解绑事件，this.$off('name')解绑事件

 this.$destroy()
 //消除当前student的实例vc,销毁后，所有student实例的自定义事件都失效了

 

app组件

 <template>
   <div class="app">
     <h1>{{msg}},学生姓名是：{{studentName}}</h1>
 ​
     <StudentMsg @atgugu="getStudentName" @demo="m1"/>
     <!--    通过父组件给子组件绑定一个自定义事件实现了：子给父传递数据 /第一种写法，v-on -->
 ​
     <SchoolMsg :getSchoolName="getSchoolName"/>
     <!--    通过父组件给子组件传递函数类型的props实现了：子给父传递数据  -->
 ​
     <!--    <StudentMsg ref="student"/>-->
     <!--    通过父组件给子组件绑定一个自定义事件实现了：子给父传递数据 /第二种写法，ref -->
   </div>
 ​
 </template>
 ​
 <script>
 import StudentMsg from "@/components/StudentMsg";
 import SchoolMsg from "@/components/SchoolMsg";
 export default {
   name: "App",
   components:{
     StudentMsg,
     SchoolMsg
   },
   data(){
     return{
       msg:'hello',
       studentName:''
     }
   },
   methods:{
     getSchoolName(name){
       console.log('app get school name:',name)
     },
     getStudentName(name){
       console.log('app get student name!',name)
       this.studentName=name
     },
     m1(){
       console.log('demo get')
     }
   },
   mounted() {
     this.$refs.student.$on('atgugu',this.getStudentName)
   }
 ​
 }
 </script>

 

总结

 /*
 组件的自定义事件：
   1.一种组件间通信的方式，适用于：子组件==>父组件
   2.使用场景：a是父组件，b是子组件，b想传递数据给a，就要在a中给b绑定自定义事件，事件的回调在a中
   3.绑定自定义事件：
     1.第一种方式：在父组件中<demo @xxx="test">或<demo v-on:xxx="test">
     2.第二种方式：在父组件中：<demo ref="demo">
                            mounted() {
                               this.$refs.xxx.$on('yyy',this.test)
                             }
     3.若想让自定义事件只触发一次，可以使用once修饰符，或者$once方法
   4.触发自定义事件：this.$emit('xxx',数据)
   5.解绑自定义事件：this.$off('xxx')
   6.组件上也可以绑定原生dom事件，需要使用native修饰符@click.native=""
   7.通过 this.$refs.xxx.$on('yyy',回调)绑定自定义事件时，回调要么配置在methods中要么使用箭头函数
     否则this的指向可能会出现问题
 */