微客导航 » 文章资讯 » vue组件添加事件@click.native操作

vue组件添加事件@click.native操作

2023-07-13 00:46:03 311

1，给vue组件绑定事件时候，必须加上native，否则会认为监听的是来自Item组件自定义的事件

2，等同于在子组件中：子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

补充知识：vue——组件间（兄弟组件间）事件派发与接收

法一

main.js

在初始化vue之前，给data添加一个名为event的空vue对象

newVue({
render:h=>h(App),
router,
store,
data:{
event:newVue()
}
}).$mount('#app')

组件一：

methods:{
addCart(e){
letpos={
x:parseInt(e.target.getBoundingClientRect().x+4),
y:parseInt(e.target.getBoundingClientRect().y+4)
}
this.$root.event.$emit('ballPosition',pos)
}
}

组件二：

created(){
this.$root.event.$on('ballPosition',(target)=>{
this._initBall(target)
})
},
methods:{
_initBall(target){
this.ball=true
this.ballMassage=target
}
}

完整案例：

抛物小球动画：

created(){
this.$root.event.$on('ballPosition',(target)=>{
this._initBall(target)
})
},
methods:{
_initBall(el){
this.ball.show=true
this.ball.el=el
},
beforeEnter(el){
letpos=this.ball.el.target.getBoundingClientRect()
el.style.top=`${pos.y}px`
el.style.left=`${pos.x}px`
},
enter(el,done){
//触发动画重绘
el.offsetHeight
let[x,y]=[parseInt(this.$refs.cart.getBoundingClientRect().x+4),parseInt(this.$refs.cart.getBoundingClientRect().y+8)]
el.style.top=`${y}px`
el.style.left=`${x}px`
el.style.transition=`left.1slinear,top.1scubic-bezier(.63,.02,.96,.56)`
done()
},
afterEnter(){
this.ball.show=false
}
},

法二

中央通信：leteventVue=newVue()

Amethods:{function(){eventVue.$emit('自定义事件','数据')}}

Bcreated(){eventVue.$on('A发送过来的事件名','函数')}

中央通信：

leteventVue=newVue()

兄弟组件A如下：

兄弟组件B如下：

以上这篇vue组件添加事件@click.native操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue组件添加事件@click.native操作

热门推荐

随机推荐