VUE----组件通信（组件自定义事件）

组件的自定义事件

1.一种组件间通信的方式,适用于: 子组件 ===> 父组件
2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
3.绑定自定义事件:
    1.第一种方式,在父组件中: <Demo @atguigu="test"> 或 <Demo v-on:atguigu="test">
    2.第二种方式:在父组件中
        <Demo ref="demo">
        .......
        mounted(){
            this.$refs.xxx.$on('atguigu',this.test)
        }
    3.若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法

4.触发自定义事件:this.$emit('atguigu',数据)
5.解绑自定义事件:this.$off('atguigu')
6.组件上也可以绑定原生DOM事件,需要使用native修饰符
7.注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出现问题！！

App.vue

<template>
  <div class="app">
    <h1>{{msg}},学生姓名是:{{studentName}}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现: 子给父传递数据-->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on)-->
    <!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref)-->
    <Student ref="student" @click.native="show"/>
  </div>
</template>

<script>
// 引入School组件
import Student from './components/Student.vue'
import School from './components/School.vue'
export default {
  name:'App',
  components:{Student,School},
  data(){
    return {
      msg:'你好啊',
      studentName:''
    }
  },
  methods: {
    getSchoolName(name){
      console.log('App收到了学校名: ',name)
    },
    getStudentName(name){
      console.log('App收到了学生名',name)
      this.studentName = name
    },
    m1(){
     console.log('demo事件被触发了！！！！') 
    },
    show(){
      console.log('show!')
    }
  },
  mounted(){
    // 等待3秒才去绑定atguigu
    // setTimeout(()=>{
    //   this.$refs.student.$on('atguigu',this.getStudentName)
    // },3000)

    // this.$refs.student.$on('atguigu',this.getStudentName)  // 绑定自定义事件
    this.$refs.student.$on('atguigu',function(){
      console.log('App收到了学生名',name)
      this.studentName = name
    })
    // this.$refs.student.$once('atguigu',this.getStudentName)  //绑定自定义事件(一次性)
    
  }
}

</script>

props实现子组件向父组件传数据
School.vue

<template>
  <div class="school">
      <h2>学校名字: {{name}}</h2>
      <h2>学校地址: {{address}}</h2>

      <button @click="sendSchoolName">学校名称给App</button>

  </div>
</template>

<script>
export default {
  name:'School',
  data () {
    return {
        name:'blibli',
        address:'无锡'
    };
  },
  props:{
    getSchoolName:Function
  },
  methods: {
    sendSchoolName(){
      this.getSchoolName(this.name)
    }
  },
  
}

</script>

自定义事件实现子组件向父组件传数据

Student.vue

<template>
  <div class="student">
      <h2>学生姓名: {{name}}</h2>
      <h2>学生性别: {{sex}}</h2>
      <h2>{{number}}</h2>
      <button @click="add">点我number++</button>
      <button @click="sendStudentName">把学生名给App</button>
      <button @click="unbind">解绑atguigu事件</button>
      <button @click="death">销毁当前Student组件的实例(VC)</button>
  </div>
</template>

<script>
export default {
  name:'Student',
  data () {
    return {
        name:'张三',
        sex:'男',
        number:0
    };
  },
  methods:{
    add(){
      console.log('add回调呗调用了！')
      this.number++
    },
    sendStudentName(){
      // 触发Student组件实例身上的atguigu事件
      this.$emit('atguigu',this.name)
      // this.$emit('click')
    },
    unbind(){
      // this.$off('atguigu') //解绑一个自定义事件
      // this.$off(['atguigu','demo']) //解绑多个自定义事件
      this.$off() //解绑所有的自定义事件
    },
    death(){
      this.$destroy() //销毁了当前的Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效了
    }
  }
}

</script>