10 uniapp-完善底部图片点击（涉及父组件调用子组件内的方法）

10 完善底部图片点击（涉及父组件调用子组件内的方法）

一 实现的效果

在没有图片的时候添加图片的+默认不显示。

通过底部图片图标按钮进行添加图片。

二 思路

1 为底部图片图标编辑点击事件

2 通过逻辑控制隐藏或者显示子组件里面的模板内容

0 扩展知识 父组件调用子组件的方法

# 父组件中
<!-- 多图上传 --> 
		<upload-image :list="imageList" :show="showTag" ref="uploadImage" @change="changeImage" ></upload-image>
# 父组件中调用子组件的方法
		this.$refs.uploadImage.chooseImage()

1 为底部图片图标编辑点击事件

....
<!-- 多图上传 --> 
		<upload-image :list="imageList" :show="showTag" ref="uploadImage" @change="changeImage" ></upload-image>
....
<view class="iconfont icon-tupian footer-btn animated " hover-class="jello" @click="iconClickEvent('uploadImage')"></view>
....
// 底部图片点击时间
iconClickEvent(e){ 
				switch (e){
					case 'uploadImage':
					// 通过这宗方式使用子组件里面的方法。
					this.$refs.uploadImage.chooseImage()
						break;
					
				}
			},

2 通过逻辑控制隐藏或者显示子组件里面的模板内容（重点）

父组件中

# 父组件中
<!-- 多图上传 --> 
		<upload-image :list="imageList" :show="showTag" ref="uploadImage" @change="changeImage" ></upload-image>

computed:{
			showTag() {
				return this.imageList.length>0
			}
				
		},

子组件中

<template>
	<view>

		<view class="py-2" v-if="show">
      .....

....
props:{
			list:Array,
			show:{
				type:Boolean,
				default:true
			}
		},
    
# 最为核心 
为什么不直接在调用子组件的时候直接使用v-if，
因为这样子组件不加载，导致父组件无法使用子组件的方法
所以父组件只做一个参数来控制子组件的标签部分不渲染就ok，但是子组件还是要加载。