[uniapp] uview(1.x) 二次封装u-navbar 导致 :custom-back函数this.$emit / this.$props失效问题处理

本文介绍了在uniapp中使用uview 1.x时,对u-navbar组件进行二次封装遇到的自定义返回事件this.$emit失效问题。问题源于在小程序中,函数绑定导致this指向子组件。解决方案包括直接调用父组件方法、修正this指向以及使用$emit事件机制。最终选择在mounted生命周期内修正this指向并使用bind来确保事件处理的正确性。
摘要由CSDN通过智能技术生成

背景介绍

uniapp 项目: 使用了uview框架 1.x版本
其中对于组件 u-navbar , 想要进行二次简单封装,把一些固定样式/固定配置等预写好, 同时对默认的返回按钮做一层前置拦截,方便后续扩展.

实现的效果

封装的组件为: navBar

	<navBar :title="pageTitle" :isBack="true" :navbarHeight.sync="navbarHeight" :customBack="abc" ></navBar>

在这里插入图片描述
这其中, 返回的点击事件我们要自定义的话, 可以通过:customBack属性来传递 function , 如此处的 abc

而在 navbar组件内部:

<template>
	<u-navbar ref='navbarex' id="nmyui" class="navbar" :is-back="isBack" :custom-back="customBackBefore" :title="title" :title-bold="true" title-color="#fff"
		:title-width="titleWidth" back-icon-color="#fff" :is-fixed="fixed" :border-bottom="border" title-size="36" :background=
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值