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=valert(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=valert(v)})

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