uni app 自定义 头部组件(3)传值

进过了第一篇,第二篇的介绍,你们会发现既然是头部导航就少不了传值(高亮),所以本章就是用记录主键传值的

  1. 既然要传值,那主键就必须有可以接受的地方。所以进入我们写好的自定义组件中添加
    接收字段名字段类型字段默认值
props: {
	navitem: { 
		type: Number,
		default: 0,
	},
	listitem: {
		type: Number,
		default: 0,
	},
	itemnumber: {
		type: Number,
		default: 0,
	}
},
  1. 在组件用created() {}来使用他们
    uni app 自定义 头部组件(3)传值_第1张图片
  2. 主键内的操作基本就是这样了,然后我们要去调用的组件的页面中给他传值
    在这里插入图片描述
    用“:”来与组件中的值绑定
    对于页面向子主键传值查到的有用
    $emit
    来进行的,不过我发现这个只有在本页面内有效,如果是类似导航一样点击后就跳转页面的就不适用了,所以我就使用了缓存的去保存:
onShow() {
			var that = this;
			uni.getStorage({
				key: 'navIndex',
				success: function(res) {

					var d = res.data;
					console.log(d, "缓存都")
					that.itemnumber=d[0].itemnumber //考虑到页面返回
					that.listitem = d[0].listitem
					that.navitem = d[0].navitem
					console.log(that.navitem, that.listitem, that.itemnumber, "111aaa")
				}
			});
			setTimeout(function() {
				that.rows=[]
				that.page=1//当前页数
				that.selectxiLieTxt()
			}, 200);
		},

在每一次页面show的时候缓存中的值就已经传递到了主键中来进行对应的高亮显示,这就是相关的操作了,具体的功能会根据设计图的不同造成代码上的不同,就不一一显示了

你可能感兴趣的:(uniapp)