vue 设计模式之观察者模式(自定义事件)
vue 中 观察者模式,用于子组件向父组件传递参数,即子组件 emit自定义一个事件名称,及其参数,父组件用事件接受即可,事件第一个参数为自定义事件名称,第二个参数为回调函数子组件代码为<template> <div> <input type="text" v-model="in
·
vue 中 观察者模式,用于子组件向父组件传递参数,即子组件 emit自定义一个事件名称,及其参数,父组件用事件接受即可,事件第一个参数为自定义事件名称,第二个参数为回调函数
子组件代码为
<template>
<div>
<input type="text" v-model="inputVal" @change="sendParams">
</div>
</template>
<script>
export default {
data () {
return {
inputVal: ''
}
},
methods: {
sendParams () {
this.$emit('handlerVal',this.inputVal)
}
}
}
</script>
父组件代码
<template>
<div>
<Child @handlerVal="getData"/>
</div>
</template>
import Child from 'components/Child'
<script>
export default {
data () {
return {
inputVal: ''
}
},
methods: {
getData (data) {
console.log(data)
}
}
}
</script>
很简单,不用多说,重点来了,vue是怎么通过自定义事件做这样的呢?
其实很简单,只需要在Vue上挂载一个对象,然后这个对象的 key(键) 为 自定义事件名称, value (值)为 自定义事件传递的参数。当有了这个思路之后,下面就是具体的落实了,代码如下
<script type="text/javascript">
var Event = {
on: function(eventName,arg) {
this.handles = this.handles || {};
this.handles[eventName] = arg || null ;
},
emit: function (eventName, cb) {
if(this.handles[eventName]) {
cb(this.handles[eventName])
}
}
}
Event.on('lcq','haha')
Event.emit('lcq',getData)
function getData(data) {
console.log(data) // haha
}
</script>
其实就是读写 Event.handles 这个对象的key和value
更多推荐
已为社区贡献3条内容
所有评论(0)