VUE中 $on, $emit, v-on三者关系

时间:2021-11-18 16:44:50

VUE中 $on, $emit, v-on三者关系

每个vue实例都实现了事件借口

  • 使用$on(eventName)监听事件
  • 使用$emit(eventName)触发事件

若把vue看成家庭(相当于一个单独的components),女主人一直在家里派($emit)男人做事,而男人一直监听$on着女主人的指派($emit)里eventName所触发的事件消息,一旦$emit事件一触发,$on则监听$emit所派发的事件,派发的命令和执行所要做的事都是一一对应的

Vm.$emit(event,[...args])
参数  {String}event
[...args]

触发当前实例上的事件,附加参数都会传给监听器回调

Vm.$on(evnet,callback)
参数  {String | Array<String>}event
{function}callback

监听当前实例上的自定义事件,事件可以由Vm.$emit触发,回调函数会接受所有传入事件触发函数的额外参数

第二个参数则是一个function,同样也被叫做之前回调函数,里面可以接受到$emit触发时所传入的参数

<template>
<div>
<p @click="emit">{{msg}}</p>
</div>
</template>
<script>
export default {
data(){
return {
msg:'点击后女人派发事件'
}
},
create(){
//派发wash_foods事件
this.$on('wash_foods',arg=>{
console.log(arg);
})
},
methods:{
emit(){
//触发 wash_foods 事件
this.$emit('wash_foods',['fish','potato','fruit'])
}
}
}
</script>

当女人派发的事情多了,男人也会觉得很烦,听到事件后,总会抱怨几句,若女人在组成家庭之前,告诉男人将要监听哪些事情,如果做一件抱怨一次,岂不是多此一举,所以通过Array<String>event 把事件名写成一个数组,在数组里写入所要监听的事件

<template>
<div>
<p @click="emit">{{msg}}</p>
<p @click="emitOther">{{msg2}}</p>
</div>
</template>
<script>
export default {
data(){
return {
msg:"点击后女人派发事件",
msg2:"点击后女人派发事件2"
}
},
create(){
this.$on(['wash_foods','driver_car'],arg=>{
console.log('事真多'); });
this.$on('wash_foods',arg=>{
console.log(arg)
});
this.$on('ariver_car',arg=>{
console.log(arg)
})
},
methods:{
emit(){
this.$emit('wash_foods','fish')
},
emitOther(){
this.$emit('driver_car',['audi','BWM'])
}
}
}
</script>

通常在写组件的时候,让 $emit在父级作用域中进行一个触发,通知子组件 进行执行事情

自定义事件可以用来创建自定义的表单输入组件

使用v-mode来进行数据双向绑定

<input v-mode="sth">

//不过是以下事例的语法糖
<input v-bind:value="sth"
v-on:input="sth" = $event.target.value">

每当输入框内容发生变化的时候,就会触发input事件,然后把input输入框中的value值再次传递给sth,此时value运用在一个input元素上,用 v-bind:value="sth" 意义上面只是把一一对应的双向绑定,这就像一个循环操作,当再次触发input事件时,input($event.target)对象中的value值会再次改变sth

通过自定义事件让v-mode进行一个父子组件 双向绑定的花

  • v-bind:value="sth" 此时value是作为子组件接受props

接受的只能是value,因为v-model是基于input输入框定制的,其中value值是input内部定制的

此时作用域在组件上时,v-on监听的语法糖也会有所改变,监听的并不是$event.target.value,而是回调函数的第一个参数

v-on:input = "sth = arguments[0]"

这是一个模态框的基本雏形,可以在父组件中通过v-model 来进行model框和父组件之间的显示交互,通过子组件看出通过props接受了value值; 当点关闭的时候还是通过$emit事件触发input事件,然后通过出入false参数

父组件隐式  v-on:input = "sth = arguments[0]"进行了监听,一旦input事件触发, 父组件就会进行监听回调,从而双向绑定

checkbox 和radio 原理

<input type="checkbox" :checked="status"
@change="status=$event.target.checked"/>
<input type="radio" :check="status"
@change="status=$event.target.checked"/>

通过绑定checked属性,同样的监听的是change事件,无论是checkbox还是radio在操作的时候都会隐式自动触发一个change事件,跟input通过value值input触发事件原理绑定是一样的

    <!-- 父组件 -->
<template>
<div class="Father">
<button @click="show=true">打开model</button>
<Son v-model="show"></Son>
</div>
</template>
<script>
import Son from './Son'
export default {
name:"Father",
data(){
return{
show:false
}
},
components:{son}
}
</script>   <!-- 子组件 -->
<template>
<div class="Son" v-show="value">
<div>
<p>model框</p>
<input type="text" v-model="value" />>
{{value}}
<button @click="close">关闭model</button>
</div>
</div>
</template> <script>
export default {
name:'Son',
props:['value'], //接受父组件传来的value值
methods:{
close(){//页面关闭子组件model框按钮事件
this.$emit('input',false)
}
}
}
</script>

定义组件v-model

定制组件,就可以重写v-model里的props和event

默认情况下一个组件的v-model会使用value 属性和input 事件,而value值被占用了,

或者表单和自定义v-model的$emit('input')事件发生冲突,为了避免这种冲突,可以定制组件v-model

input中的v-model和model显示操作数据共同占用props中的value,同样两者也共同占据了emit('input' )触发事件,input输入框的事件自动触发,而model显示消失是手动触发的

初始化的时候,input输入框的值会被value传入的false值给自动加上,当改变input输入框的时候,因为冲突而导致报错

定制v-model,通过model选项改变props和evnet的值,从而解除两者的冲突

  • props代替掉原本value的值,可以自定义值
  • event代表掉原来input的触发事件,可自定义触发事件