写了个自定义组件，在某些特定情况下需要在组件的特定位置显示一个自定义的内容，于是使用了插槽，然后App端就报错了，大概是下面这么个情况

 子组件

<template>
    <!-- 我是子组件componentA -->
     <view>
		<slot></slot>
	</view>
</template>

父组件

<template>
	<view>
		<!-- 我是父组件 -->
		<componentA>
			<!-- 添加一个 uni-icons 图标 -->
			<uni-icons v-if="show" type="contact" size="30"></uni-icons>
		</componentA>
	</view>
</template>

<script>
export default {
    data() {
	    return {
            show: false //控制是否显示插槽
        }
    }
}
</script>

App端报错：

解决：猜测是在父组件渲染的时候是识别到有插槽内容的，但是又在标签上使用了v-if导致的，改成v-show 或着在外层包裹一层view就不报错了。

v-if 和 v-show 区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

修改：

<template>
	<view>
		<!-- 我是父组件 -->
		<componentA>
			<!-- 添加一个 uni-icons 图标 -->
			<uni-icons v-show="show" type="contact" size="30"></uni-icons>
		</componentA>
	</view>
</template>

<template>
	<view>
		<!-- 我是父组件 -->
		<componentA>
			<!-- 添加一个 uni-icons 图标 -->
            <view>
                <uni-icons v-if="show" type="contact" size="30"></uni-icons>
            </view>
		</componentA>
	</view>
</template>