Vue组件自定义事件

v-on:xxx=""  ：绑定

 this.$emit('xxx')  :  触发

this.$off()   :    解绑

App.vue

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!--通过父组件给子组件传递函数类型的props实现：子给父传递参数-->
    <School :getSchoolName="getSchoolName"/>
    <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on）-->
    <Student v-on:liner="getStudentName"/>
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
  name: "App",
  components:{
    Student,
    School
  },
  data(){
    return {
      msg:'你好啊！'
    }
  },
  methods:{
    getSchoolName(name){
      console.log("App收到了学校名",name)
    },
    getStudentName(name,...params){
      console.log("App收到了学生名",name,params)
    }
  }
}
</script>
<style>
  .app{
    background-color: gray;
    padding: 5px;
  }
</style>

Student.vue：通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on）， this.$emit触发

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名给app</button>
  </div>
</template>

<script>
export default {
  name: "MyStudent",
  data(){
    return {
      name:'张三',
      sex:'男'
    }
  },
  methods:{
    sendStudentName(){
      //触发Student组件实例身上的liner事件
      this.$emit('liner',this.name,111,222)
    }
  }
}
</script>
<style  scoped>
  .student{
    background-color: orange;
    padding: 5px;
    margin-top: 30px;
  }
</style>

School.vue：通过父组件给子组件传递函数类型的props实现：子给父传递参数

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="sendSchoolName">点击提交学校名称</button>

  </div>
</template>

<script>
export default {
  name: "MySchool",
  props:[
      'getSchoolName'
  ],
  data(){
    return {
      name:'山河学aaa',
      address:'山河四省'
    }
  },
  methods:{
    sendSchoolName(){
      this.getSchoolName(this.name)
    }
  }
}
</script>
<style scoped>
  .school{
    background-color: aqua;
    padding: 5px;
  }
</style>

 

 

 解绑：

      // this.$off('liner')//解绑一个自定义事件
      // this.$off(['liner','demo']) //解绑多个自定义事件
         this.$off() //解绑所有的自定义事件

Student.vue

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名给app</button>
    <button @click="unbind">解绑liner组件</button>
  </div>
</template>

<script>
export default {
  name: "MyStudent",
  data(){
    return {
      name:'张三',
      sex:'男'
    }
  },
  methods:{
    sendStudentName(){
      //触发Student组件实例身上的liner事件
      this.$emit('liner',this.name,111,222)
      this.$emit('demo')
    },
    unbind(){
      // this.$off('liner')//解绑一个自定义事件
      // this.$off(['liner','demo']) //解绑多个自定义事件
      this.$off() //解绑所有的自定义事件
    }
  }
}
</script>
<style  scoped>
  .student{
    background-color: orange;
    padding: 5px;
    margin-top: 30px;
  }
</style>

总结：