vue 父组件向子组件传递点击事件
创建了一个子组件,子组件有自已默认的点事击事,当父组件传递点击事件时,则执行父组件点击事件
案列:顶部导行条
情况:当点击左箭点,判断父组件是否传递了点击事件,如果有就执行父组件的点击事件,如果没有,则默认执行子组件的点击事件
子组件相关代码
html
<div class="topBar"> <div class="fixed"> <span class="iconfont left" @click="onleftClick()">{{ltext?ltext:''}}</span> <div class="center">{{title?title:''}}</div> <span class="iconfont right" @click="onrightClick()">{{rtext?rtext:''}}</span> </div> <div style="height:46px;"></div> </div>
js
export default { name: 'TopBar', props:{ title:'', ltext:'', rtext:'', leftClick:'', //左箭头点击事件 rightClick:'', //右箭头点击事件 }, data () { return { } }, methods: { //左箭头点击事件 onleftClick(){ if(this.leftClick){ this.leftClick(); //执行父事件 }else{ window.history.back(); } }, onrightClick(){ if(this.rightClick){ this.rightClick(); //执行父事件 } }, }, }
父组件相关代码
html
<TopBar :leftClick="back" title="个人信息" rtext=" "></TopBar>
methods:{ //返回会员中心 back(){ this.$router.push('/member'); }, //前往 to(){ this.$router.push('/setUser'); } }