vue2中的组件自定义事件

        1.绑定事件:        <组件  :自定义名称="方法"  />

        2.调用                this.$emit('方法',参数)

        3.关闭               this.$off('方法')

       案例:

     1.提前准备好组件

      Student组件

<template>
  <div class="student">
    <h1>学校名称:{{ stname }}</h1>
    <h1>学校地址:{{ staddress }}</h1>
    <button @click="getB()">提交</button> 
  </div>
</template>

<script>
export default {
  name: "StudentB",
  data() {
    return {
      stname: "千锋",
      staddress: "陕西",
    };
  },
  props:['g'],
  methods: {
    getB() {
      this.g(this.stname,this.staddress)
    }, 
  },
};
</script>

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

      App组件

<template>
  <div id="app">
    <h1>{{msg}}</h1> 
    <h1>学校姓名:{{studentname}}</h1>
    <StudentB :g="getStudentB"/> 
  </div>
</template>

<script>

import StudentB from './components/Student' 

export default {
  name: 'App',
  components: {
    StudentB
  },
  data(){
      return{
         msg:"你好啊" ,
         studentname:""
      } 
   },
  methods:{ 
        getStudentB(v,...params){ 
          console.log(params)
          this.studentname=v
          alert(v)
        }, 
    }, 
}
</script>

<style>
#app {
 background-color: red;
 text-align: center;
}
</style>

        2.运行项目

         点击提交弹出学校名称

3.将getStudentB方法改成自定义事件

        3.1在app组件中定义自定义事件

  <StudentB @g="getStudentB"/> 

        3.2在student组件中调用

this.$emit('g',this.stname,this.staddress)

        4.测试功能还可以实现

              以上就是自定义事件的基本使用

        解绑自定义事件:

 <button @click="unBind()">解绑</button> 

    unBind(){ 
      this.$off('g')   //删除一个自定义事件
      // this.$off(['g'])  //删除某些自定义事件
      // this.$off()   //删除所有自定义事件 
       }

           接触绑定后我们的功能就失效了

 

        使用ref绑定自定义事件

<StudentB ref="stu"/> 

    mounted(){
      this.$refs.stu.$on('g',this.getStudentB)
    }

    mounted(){
      this.$refs.stu.$on('g',(v)=>{
        this.studentname=v
         alert(v)
      })

           如果用箭头函数写的方法this会自动找外层的，因为箭头函数没有this