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