uniapp微信小程序端自定义组件不传数据时,自动显示为null,该怎么删除?

uniapp微信小程序端自定义组件不传数据时,自动显示为null,该怎么删除?

本人在百度搜索无果,然后再继续看uniapp学习视频,发现了把props数组形式改为对象形式即可解决。

下面请看代码:

错误示范(下图是自定义组件)(用的数组形式,其实做项目比较少用这个)

<template>
	<view>
		<view class="item">
			<view class="itemTitle">{
   
   {itemTitle}}</view>
			<view class="more">{
   
   {more}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"item",
		props:["itemTitle","more"],
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

结果如下图,在首页index.vue里面不传数据就会出现null

在这里插入图片描述
正确的解决办法(这种方法在实际项目中常用)

<template>
	<view>
		<view class="item">
			<view class="itemTitle">{
   
   {itemTitle}}</view>
			<view class="more">{
   
   {more}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"item",
		// props:["itemTitle","more"],
		props:{
		itemTitle:{
			type:String,
		    default:"默认标题"
		},
		more:{
			type:String,
			default:""
		}
		},
		data() {
			return {
				
			}
		},
		methods: {
		}
	}
</script>

结果如下图:
在这里插入图片描述

这样就没有null了

猜你喜欢

转载自blog.csdn.net/huang_99/article/details/130277210