组件定义:
<view class="page-wrapper">
<view class="page-header">
<slot name="header"></slot>
<view wx:if="{{isGuest}}" class="guest-flag">
<view class="guest-flag-bg"></view>
<view class="text">游客</view>
</view>
</view>
<view class="page-main">
<view wx:if="{{!enableGuest&&isGuest}}" class="guest-notice">
<image src="../../assets/svgs/没有访问权限.svg"></image>
<view class="msg">游客模式不支持该功能</view>
</view>
<block wx:else>
<slot></slot>
</block>
</view>
<van-toast id="van-toast" />
</view>
组件使用:
<page-wrapper>
<view slot="header" class="home-header">
首页
</view>
<device-list></device-list>
</page-wrapper>
实际运行时,device-list组件时不显示的,但是却触发了device-list组件的生命周期函数:
请问这是什么原因造成的?
笔者之前一直时使用vue的,在vue中如果插槽不显示,插槽内的组件生命周期函数书不会调用的。
其实dom已经渲染了 当然会执行生命周期
遇到一样的问题,似乎无解,好恶心
你在wxml里使用了device-list这个组件,加载这个组件时,生命周期函数自然就执行一遍了
2. 为组件设置wx:if,在父页面js中添加定时器,控制组件的显示隐藏,看看组件的生命周期函数是如何执行的
本身插槽的机制已经控制了组件的展示,但是还需要用 wx:if 再做一次控制(而已wx:if 的初始时一定要时false),感觉这种方式很啰嗦,但是可以解决问题