代码地址：https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/80

App.vue

<template>
  <div class="app">
    <div>
      p80-83:组件间通讯方法2-自定义事件实现：<br/>
      通过组件上传参，并自定义事件方法名传给子组件，<br/>
      子组件通过$emit触发自定义事件,$off销毁自定义事件实现通讯<br/>
      如果要用原生事件要加上修饰符native,如：@click.native，否则它就是一个算义的click事件<br/>
      <hr/>
    </div>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/80/School.vue";

export default {
  name: 'App',
  components: {
    School,
  },
  methods:{
  }
}
</script>

<style>
.app {
  background-color: #dedede;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--通过自定义事件接收到来自Student子组件的数据-->
    School.vue收到来自Student.vue中的数据为：{{students}},{{other}}
    <hr/>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p>id：{{ school.id }}</p>
    <p>名称：{{ school.name }}</p>
    <p>地址：{{ school.address }}</p>
    <button @click="showId(school.id)">弹出id</button>
    <hr/>
    <!--这里传递了一个自定义事件myEventDemo到Student.vue,传递过去后将保存组件实例的$emit中-->
<!--    <Student v-on:myEventDemo="myEventDemo"></Student>-->
    <!--自定义事件：简写形式-->
<!--    <Student @myEventDemo="myEventDemo"></Student>-->
    <!--自定义事件：简写形式.只能用一次-->
    <!--    <Student @myEventDemo.once="myEventDemo"></Student>-->
    <!--自定义事件第二种实现方法：ref+$mount-->
<!--    <Student ref="student"></Student>-->
    <!--这里看似是click事件，事实是一个叫做click的自定义事件-->
<!--    <Student ref="student" @click="show()"></Student>-->
    <!--如果要用原生的click事件要加上修饰符native,它会把这个事件叫给student组件的最外层容器，这也是为什么语法检查时如果组件内容不允许放在最外层容器外的原因-->
        <Student ref="student" @click.native="show()"></Student>
  </div>
</template>

<script>
import Student from './Student.vue'

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {
    Student
  },
  data() {
    return {
      school: {
        'id': '001',
        'name': '清华',
        'address': '北京'
      },
      students:'',
      other:'',
    }
  },
  methods: {
    //自定义事件实现方法1：接口来自Student中的数据
    myEventDemo(data,...params){
      this.students=data
      this.other=params
      console.log(params)
    },
    show(){
      alert(1)
    }
  },
  mounted() {
    //自定义事件，实现方法2，更灵活：本例3秒后这个事件才可以用
   // setTimeout(()=>{
      this.$refs.student.$on('myEventDemo',this.myEventDemo)
      //只能用一次
      // this.$refs.student.$once('myEventDemo',this.myEventDemo)
   // },3000)
  }
}
</script>

<style scoped>
.name{
  font-size:60px;
  color:blue;
}
</style>

Student.vue

<!--组件的结构-->
<template>
  <div>
    <dl>
      <dt>{{ className }}学生信息</dt>
      <dd v-for="(s) in students" :key="s.id">
        {{ s.id }}-{{ s.name }}-{{ s.sex }}-{{ s.age }}
        <button @click="showId(s.id)">弹出id</button>
      </dd>
    </dl>
    <button @click="sendUserToSchool">将学生数据发送给School组件</button>
    <button @click="unbind">解绑:将学生数据发送给School组件</button>
    <button @click="die">销毁组件事件就解绑了</button>
  </div>
</template>

<!--组件的交互代码:数据\方法-->
<script>

export default {
  //组件名称，这个名称仅是给vue插件中显示用的
  name: 'my-student',
  //组件数据：由于数据是从props接收的，这里不能定义数据
  data() {
    return {
      className: '一年级',
      students: [//数组中的对象操作
        {id: 1, name: '李四', sex: '男', age: 39},
        {id: 2, name: '王五', sex: '女', age: 42},
      ]
    }
  },
  //组件方法
  methods: {
    //发送学生数据给Student
    sendUserToSchool() {
      //触发School.vue传递过来的自定义事件
      this.$emit('myEventDemo', this.students, 111111111, 2222222)
    },
    //解绑事件
    unbind() {
      //解绑所有事件
      this.$off('myEventDemo')
      //解绑多个指定事件
      //this.$off(['myEventDemo','xxxxxxxxxx'])
      //这样会解绑所有事件
      // this.$off()
    },
    die() {
      this.$destroy()
    }
  },
}

</script>

<!--样式-->
<style scoped>
dt {
  color: red;
}
</style>