先贴代码吧!
html:
<div id="app">
<button class="btn btn-primary" @mouseover="popShow($event) | debounce 500" @mouseout="popHide">弹出气泡卡片</button>
<v-popover :show="show" :title="pop_title" :content="pop_content" :target="pop_target"></v-popover>
</div>
子组件:
;(function (Vue, window) {
var template = `
<div class="popover-wrap" v-show="show" transition="popover">
<div class="popover-box">
<div class="popover-title">{{title}}</div>
<div class="popover-content">{{content}}</div>
</div>
</div>`
var popover = Vue.extend({
template,
props: {
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: '标题'
},
content: {
type: String,
default: '内容'
},
target: {}
}
})
window.popover = popover
})(Vue, window)
js:
var btn = new Vue({
el: '#app',
data: {
show: false,
pop_title: '',
pop_content: '',
pop_target: {}
},
methods: {
popShow: function (e) {
this.pop_title = '我是标题'
this.pop_content = '我是一段提示内容'
this.pop_target = e
this.show = true
},
popHide: function () {
this.show = false
}
},
components: {
'v-popover': popover
}
})
现在我来讲下问题:我在popShow
函数中把e
打印出来是一个触发事件的对象,如下图
但是在传给子组件后,只留下了MouseEvent,并不是整个对象,如下
这个原因是什么,有什么解决办法吗?我现在暂时的解决办法是把需要的值从事件对象里面把值抽出来再传进子组件使用。
父组件监听事件采用capture方式,并且事件处理函数return true
的话,事件就会继续传递给子组件