组件的自定义事件
1.一种组件间通信的方式,适用于: 子组件=>父组件
2.使用场景:
A是父组件,B是子组件。
B想给A传数据,那么就要在A中给B绑定自定义事件(事件回调在A中)
3.绑定自定义事件:
①在父组件中:
<B @zidingyi = 'fn'/> 或 <B v-on:zidingyi = 'fn'/>
4.触发自定义事件:
在谁身上定义自定义事件,就在谁身上触发,所以我们现在要去B组件中触发。
用this.$emit('zidingyi',数据)
5.解绑自定义事件:
用this.$off('zidingyi')
例子:
首先,我们创建脚手架,然后我的是这样的:
只需要在这三个文件中写就行。
父组件中的代码:
<template>
<div>
<h1>父组件</h1>
<p>父组件名字:{
{name}}</p>
<p>父组件年龄:{
{age}}</p>
<p>接收子组件传过来的数据:{
{JieShou}}</p>
<hr>
<ZiZuJian @zdy="hhh"></ZiZuJian>
</div>
</template>
<script>
import ZiZuJian from './Zizujian.vue'
export default {
name:'FuZuJian',
components:{ZiZuJian},
data(){
return{
name:'父组件aa',
age:'188',
JieShou:'',
}
},
methods:{
hhh(val){
this.JieShou = val
}
}
}
</script>
<style>
</style>
大家可以看到,我在父组件中给子组件绑定了自定义事件(zdy)。
子组件中的代码:
<template>
<div>
<h1>子组件</h1>
<p>子组件的爱好:{
{hobby}}</p>
<p>子组件的日常:{
{dailylife}}</p>
<button @click="chuanzhi">点击后,子传父</button>
</div>
</template>
<script>
export default {
name:'ZiZuJian',
data(){
return{
hobby:'打球',
dailylife:'看书'
}
},
methods:{
chuanzhi(){
this.$emit('zdy',this.hobby)
}
}
}
</script>
<style>
</style>
我们上面说了,我们在谁身上绑定自定义事件,就要在谁身上触发,所以我们要在子组件中触发自定义事件,那么我这里用的是,点击一下按钮,触发方法chuanzhi,然后该方法中,去触发自定义事件zdy,然后并把想要传给父组件的值(this.hobby)传过去。
触发自定义事件zdy后,在父组件中,会调用hhh方法,然后该方法有一个参数val,我们把从子组件传过来的this.hobby的值传给val,然后通过this.JieShou = val得到子组件传过来的数据。
APP的代码:(下面是一个vue文件)
<template>
<div>
<FuZuJian></FuZuJian>
</div>
</template>
<script>
import FuZuJian from './components/FuZujian.vue'
export default {
name:'App', //组件名
components:{FuZuJian}
}
</script>