一.DOM事件分析
- 原生DOM事件
- 1.绑定事件监听
如: div.onclick = () = > {}
- 目标元素 div
- 事件名称 click
- 回调函数 ()=>{}
- 2.调用事件(也称分发事件)
- 当我们对目标元素进行相应的操作的时候,浏览器会自动的调用对应的事件
- vue自定义中的事件
- 1.绑定事件监听
- 用法: 比如:
vm.$on("xxx",callback)
解释:在Child标签当中绑定一个事件对象 fn , 事件名 xxx
- 2.调用事件(分发事件)
- 用法: 比如:
vm.$emit("xxx",data)
解释: 在当前组件中,调用(分发) xxx 事件,传入数据为data(data一般指event)
- 3.解除事件
- 用法:比如:
vm.$off("xxx",callback)
- vue中自定义事件:
- 一般用户子向父通讯 ==> 用来替代函数props来传递参数
- 子向父传递数据
二.案例分析
- App组件(功能为father组件)
<template>
<div>
<!-- <Child @father="father"/> --> <!-- 2A. 方式一:给子组件添加绑定事件 -->
<Child ref="fa"/><!-- 2B.给组件设置一个属性 -->
<div>{{message}}</div>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
components:{
Child
},
mounted() {
// 2B.方式二.通过给子组件设置的属性找到该组件,然后再绑定事件
this.$refs.fa.$on("father",this.father)
},
data(){
return{
message:"父组件中的数据"
}
},
methods: {
//1.定义一个事件
father(value){
this.message = this.message + value;
}
},
}
</script>
<style>
</style>
- 子组件
<template>
<div>
<button @click="sonAdd">子组件</button>
</div>
</template>
<script>
export default {
name: 'Child',
methods: {
sonAdd(){
//3.调用自定义事件,并传递参数
this.$emit("father","我是子组件中的数据")
}
},
}
</script>
<style>
</style>
- 案例效果图展示
