@[toc]
3.13自定义事件
适用于：子组件 =》 给父组件传值
父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件\$on和\$emit：
- $on监听: 不能监听驼峰标示的自定义事件, 使用全部小写(abc)或者-(a-b-c)
- $emit主动触发: $emit(事件名,传入参数)
3.13.1自定义事件绑定到子组件
注意点1：问题：子组件调用父组件方法时传参，父组件如何接收到参数值？
1）如果只传递一个参数，比如：this.$emit('update-count', "你是谁？");
那么子组件标签形参可不带参数或者形参使用$event
<child v-on:update-count="changeCount"></child>
或者<child v-on:update-count="changeCount($event)"></child>
那么父组件(vue实例)方法中通过value即可接收参数比如： changeCount:function(value)
2）如果传递多个参数，比如： this.$emit('update-count', "ldz",29);，
那么子组件标签形参请使用arguments
<child v-on:update-count="changeCount(arguments)"></child>
那么父组件(vue实例)方法中通过value[index]即可接收参数，比如：
changeCount:function(value){
console.log("@" + value[0]);
console.log("@" + value[1]);
方式1（推荐方式1，因为好记）：调用子标签不写括号和形参，但方法形参使用...
> 子组件
java this.$emit('student1Send', this.ipt, this.ipt2)
> 父组件
java <B ref="childrenB" @student1Send="getB"></B> methods: { getB(...args) { this.strb = args[0]; this.strb2 = args[1]; }
方式2：调用子标签写括号和形参arguments，那么方法形参不使用...
> 子组件
java this.$emit('student1Send', this.ipt, this.ipt2)
> 父组件
java <B ref="childrenB" @student1Send="getB(arguments)"></B> methods: { getB(args) { this.strb = args[0]; this.strb2 = args[1]; }
注意点2：子组件标签中形参必须叫arguments，而父组件中方法形参function(value)，这个value名字可以叫任意名字
### 举例1：模拟只传递一个参数
> 1）声明父组件
java var app = new Vue({ el:'#app', data:{ count:0 }, methods:{ //定义计数方法 changeCount:function(value){ console.log(value); //计数 this.count += 1; } } });
> 2）自定义事件
java <div id="app"> <!-- 自定义事件update-count --> <child v-on:update-count="changeCount"></child> <p>{
{count}}</p> </div>
在事件v-on:update-count中的update-count就是自定义事件的名字，不要使用驼峰标示，html不区分大小写，会导致子元素无法主动触发父组件的自定义事件。
> 3）定义子组件
java Vue.component('child', { template:'<button v-on:click="update">子组件Child</button>', methods:{ update: function () { console.log('update'); //主动触发事件执行 this.$emit('update-count', '子组件参数'); } } });
子组件child中定义的update方法，内部通过$emit('update-count')主动触发父元素事件的执行。
> 结果展示
### 举例2：模拟传递多个参数
> 子组件
java <template> <div> <button @click="student1Send()">点击学生1组件发送消息</button> </div> </template> <script> export default { name: "B", data() { return { ipt:"我是学生1组件发过来数据", ipt2:"我是你爸爸" } }, methods: { student1Send() { this.$emit('student1Send', this.ipt, this.ipt2) }, } } </script> <style scoped> </style>
> 父组件
java <template> <div id="app"> <B ref="childrenB" @student1Send="getB(arguments)"></B> <p>接收的b数据：{
{strb}}</p> <p>接收的b数据：{
{strb2}}</p> </div> </template> <script> import B from "./B.vue" export default { name: "A", data() { return { strb:"", strb2:"", } }, components: { B }, methods: { getB(args) { console.log(args); this.strb = args[0]; this.strb2 = args[1]; console.log(this.$refs.childrenB) } },
> 结果展示
## 3.13.2自定义事件挂载到父组件
自定义事件不仅可以绑定在子组件，也可以直接挂载到父组件， 使用\$on绑定和\$emit触发。
2种方式区别：
自定义事件绑定到子组件，其实是调用定义子组件方法 -> 调用自定义事件 -> 调用父组件方法。
自定义事件挂载到父组件，其实是vue实例直接配置自定义函数从而达到操作父组件属性， 第一步通过app.\$on主动挂载自定义函数名，主动挂载就等于vue实例定义method方法， 第二步通过app.\$emit主动触发事件。
java <div id="app"> </div> var app = new Vue({ el:'#app', data:{ count:0 } }); //主动挂载 app.$on('update-count', function(value){ console.log(value); //计数 this.count += 1; }); app.$emit('update-count',123);
## 3.13.3自定义事件-解绑
自定义事件既然可以定义绑定，那么肯定也支持解绑，所谓解绑就是让自定义事件失效。
语法：this.$off('自定义事件名')
this.$off('atguigu') //解绑一个自定义事件
this.$off(['atguigu','demo']) //解绑多个自定义事件
this.$off() //解绑所有的自定义事件
3.13.4使用自定义事件的容易出错的点
案例1：有3个组件，父组件App.vue，2个子组件Student.vue和School.vue，想实现点击子组件按钮把学生名传递给App，并在父组件App上显示出来
初始化页面
点击按钮成功收到消息图片
完整代码：
App.vue
<template>
<div class="app">
<h1>{
{
msg}}，学生姓名是:{
{
studentName}}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<School :getSchoolName="getSchoolName"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<Student @atguigu="getStudentName"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" />
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{
School,Student},
data() {
return {
msg:'你好啊！',
studentName:''
}
},
methods: {
getSchoolName(name){
console.log('App收到了学校名：',name)
},
getStudentName(name,...params){
console.log('App收到了学生名：',name,params)
this.studentName = name
},
},
mounted() {
// this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
// this.$refs.student.$on('atguigu',function (name,...params) {
// console.log('App收到了学生名：',name,params)
// console.log("this:", this); //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc
// this.studentName = name
// }) //绑定自定义事件
this.$refs.student.$on('atguigu',(name,...params) => {
console.log('App收到了学生名：',name,params)
console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
this.studentName = name
}) //绑定自定义事件
},
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>
School.vue
<template>
<div class="school">
<h2>学校名称：{
{
name}}</h2>
<h2>学校地址：{
{
address}}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
<script>
export default {
name:'School',
props:['getSchoolName'],
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
methods: {
sendSchoolName(){
this.getSchoolName(this.name)
}
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>
Student.vue
<template>
<div class="student">
<h2>学生姓名：{
{
name}}</h2>
<button @click="sendStudentlName">把学生名给App</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
number:0
}
},
methods: {
sendStudentlName(){
//触发Student组件实例身上的atguigu事件
this.$emit('atguigu',this.name,666,888,900)
},
},
}
</script>
<style lang="less" scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
> App.vue
java <School :getSchoolName="getSchoolName"/> methods: { getSchoolName(name){ console.log('App收到了学校名：',name) } }
> School.vue
java <button @click="sendSchoolName">把学校名给App</button> props:['getSchoolName'], methods: { sendSchoolName(){ this.getSchoolName(this.name) } }
方式2：使用自定义函数，父组件App中定义自定义函数传递给子组件，子组件通过&emit触发自定义事件调用，父组件中定义函数接收传递过来的值
> App.vue
java <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） --> <Student @atguigu="getStudentName"/> getStudentName(name,...params){ console.log('App收到了学生名：',name,params) this.studentName = name }
> Student.vue
java <button @click="sendSchoolName">把学校名给App</button> methods: { sendStudentlName(){ //触发Student组件实例身上的atguigu事件 this.$emit('atguigu',this.name,666,888,900) }, }
方式3：使用ref标签，子组件通过&emit触发自定义事件调用，在父组件App中使用ref获取子组件标签同时搭配&on获取传递过来的值
> App.vue
java <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） --> <Student @atguigu="getStudentName"/> methods: { getStudentName(name,...params){ console.log('App收到了学生名：',name,params) this.studentName = name } } //第1种写法 mounted() { this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件 } --------------------------------------------------------------------------------------- <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） --> <Student @atguigu="getStudentName"/> //第2种写法 mounted() { this.$refs.student.$on('atguigu',(name,...params) => { console.log('App收到了学生名：',name,params) console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc this.studentName = name }) //绑定自定义事件 }
### 容易出错点1：
在父组件App中使用$on的箭头函数中把子组件传递过来的值赋值给父组件属性，会导致父组件属性接收不到信息
失败图片
成功图片
答案：在父组件App中使用\$on的普通函数this指代子组件的vc，而\$on的箭头函数this指代父组件的vc，所以\$on的普通函数的this.studentName = name就会赋值失败，正确写法就是上面说的，要么method定义赋值，\$on中直接调用，要么$on中使用箭头函数去赋值
mounted() {
this.$refs.student.$on('atguigu',function (name,...params) {
console.log('App收到了学生名：',name,params)
console.log("this:", this); //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc
this.studentName = name
}) //绑定自定义事件
}
---------------------------------------------------------------------------------------
mounted() {
this.$refs.student.$on('atguigu',(name,...params) => {
console.log('App收到了学生名：',name,params)
console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
this.studentName = name
}) //绑定自定义事件
}
容易出错点2：
问题：我在子组件Student 标签中使用了自定义事件，我想再绑定个原生事件，为啥原生事件失效了？
<Student ref="student" @click="show"/> //错误写法
methods: {
show(){
alert(123)
}
}
答案：因为原生事件也使用@注解，子组件标签默认会把@标识的原生事件理解为是自定义事件，所以就失效了，解决办法是在@click后面加.native标识符，这样子组件就知道这个click方法是原生方法。
<Student ref="student" @click.native="show"/> //正确写法
再引出个思考点：为啥说子组件中根元素标签只能有一个，比如最外层只能有1个div标签，为啥能不能有2个？
答案：给子组件标签绑定【自定义事件/原生事件】，实际是给里面的整个标签绑定函数，如果你有2个div，它哪知道给谁，如果2个都给岂不乱套了，当然这只是其中一个理由，实际子组件根元素标签只让有一个元素还有好多原因，只不过我还没学到。
本人其他相关文章链接
1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）
9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
13.vue2知识点：组件的props属性、非props属性、props属性校验
16.vue2知识点：动态组件
17.vue2知识点：混入
19.vue2知识点：全局事件总线（GlobalEventBus）
23.vue2知识点：路由
25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）
26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习：待办事项Todo-list案例练习
28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮
