uniapp 中使用u-tabs报错annot read property ‘props‘ of undefined

在uni-app项目中,使用u-tabs组件时遇到页面加载错误。经过排查,发现移除u-tabs后错误消失。为解决此问题,参考其他程序,在main.js文件中引入并使用uView库,通过Vue.use(uView)注册组件,成功避免了错误发生。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上下测试用的代码

<template>
	<view>
		<u-tabs :list="detailType"  @click="click" @change="change"></u-tabs>
	</view>
</template>

<script>
	export default {
		components: {
		},
		onLoad(e) {
			},
		data() {
			return {
				detailType: [
					{name: 'aaa'},
					{name: 'bbb'},
					{name: 'ccc'},
					{name: 'ddd'},
				],
				current:0
			}
		},
		methods: {
			click() {
				},
			change(index) {
					this.current = index;
				}
		}
	}
</script>

<style>
	
</style>

很简单对不对,但是每当访问这个页面的时候程序就会报错,最后发现删除u-tabs后就访问正常了,百度\bing了很久都没有找到原因,最后参考其他程序,解决办法是在main.js中增加以下代码解决

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

uniApp中,如果你使用`u-tabs`组件,并且父组件通过`v-if`条件控制其展示,可能会导致`u-tabs`无法正常显示或初次加载后不会响应内容切换。这种情况通常是因为Vue的动态组件渲染问题,当`v-if`切换时,未卸载的组件状态不会被保留,`u-tabs`需要重新初始化。 解决这个问题有几种方法: 1. **手动触发更新**: 在`v-if`条件改变后,你可以主动调用`this.$nextTick(() => { ... })`,确保DOM更新完成后再操作`u-tabs`。 ```html <template> <div v-if="showTabs"> <u-tabs ref="tabs" @ready="onTabsReady"></u-tabs> </div> </template> <script> export default { data() { return { showTabs: false, }; }, methods: { onTabsReady() { // 在这里处理 tabs 初始化,例如设置默认选中项等 }, toggleTabs() { this.showTabs = !this.showTabs; this.$nextTick(() => { if (this.showTabs) { this.$refs.tabs.init(); // 初始化 u-tabs 组件 } }); }, }, }; </script> ``` 2. **使用keep-alive**: 如果`v-if`控制的是整个包含`u-tabs`的容器,可以考虑使用`<keep-alive>`标签包裹,以便复用已渲染过的`u-tabs`组件实例。这样当`v-if`条件改变时,`u-tabs`的状态会被保存下来。 ```html <template> <keep-alive> <div v-if="showTabs"> <u-tabs ref="tabs" :key="tabKey"></u-tabs> </div> </keep-alive> </template> <script> export default { data() { return { showTabs: false, tabKey: '', // 需要给每个 u-tabs 设置唯一的 key,防止替换后失去状态 }; }, computed: { activeTabKey() { // 根据当前需求计算并返回当前激活的 tab 的 key } }, watch: { showTabs(newVal) { if (newVal && this.tabKey !== this.activeTabKey) { this.tabKey = this.activeTabKey; // 更新 key this.$nextTick(() => { this.$refs.tabs.setActiveKey(this.activeTabKey); }); } else if (!newVal) { this.tabKey = ''; // 清除 key } }, }, }; </script> ``` 3. **懒加载策略**: 如果`u-tabs`的内容非常丰富,可以考虑使用懒加载策略,只在用户实际交互时加载相应部分。 无论哪种方法,关键是要保证组件在需要的时候得到正确的渲染和初始化。务必确保你在适当的时候调用了必要的初始化方法,如`init()`、`setActiveKey()`等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值