组件自定义事件

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

App.vue

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

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

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法：使用ref) -->
    <!-- <Student ref="student" @click.native="show" /> -->
  </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: '你好啊',
    }
  },
  methods: {
    getSchoolName(name) {
      this.msg = name
    },
    getStudentName(name) {
      this.msg = name
    },
    show() {
      alert('123')
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.$refs.student.$on('sendStudentName', this.getStudentName)
    // }, 3000)
    // this.$refs.student.$once('sendStudentName', (name)=>{
    //   this.msg = name
    // })
    // this.$refs.student.$on('sendStudentName', this.getStudentName) //绑定自定义事件
    // this.$refs.student.$once('sendStudentName', this.getStudentName) //绑定自定义事件（一次性）
  },
}
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>

Student.vue

<template>
  <!-- 组件的结构 -->
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">点击将学生名字传给app</button>
    <button @click="unbind">解绑sendStudentName事件</button>
    <button @click="death">销毁当前student组件的实例(vc)</button>
  </div>
</template>

<script>
// 第一步：创建学校组件
export default {
  name: 'Student',
  data() {
    return {
      name: '张三',
      sex: '男',
    }
  },
  methods: {
    sendStudentName() {
      // 触发student组件实例身上的 sendStudentName事件
      this.$emit('sendStudentName', this.name)
    },
    unbind() {
      this.$off('sendStudentName') //解绑一个自定义事件
      // this.$off(['sendStudentName', 'method2']) //解绑多个自定义事件

      // this.$off() //解绑所有的自定义事件
    },
    death() {
      this.$destroy() //销毁了当前student组件的实例(vc)，小灰灰
    },
  },
}
</script>

<style scoped>
.student {
  background-color: orange;
  padding: 5px;
  margin-top: 30px;
}
</style>

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: '清华大学',
      address: '北京',
    }
  },
  props: ['getSchoolName'],
  methods: {
    sendSchoolName() {
      this.getSchoolName(this.name)
    },
  },
}
</script>

<style lang="less" scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>