收藏
回答

自定义组件内的slot插槽不显示,但是却能触发slot内组件的生命周期函数?

组件定义:

<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中如果插槽不显示,插槽内的组件生命周期函数书不会调用的。



回答关注问题邀请回答
收藏

3 个回答

  • 🤪
    🤪
    2023-07-13

    其实dom已经渲染了 当然会执行生命周期

    2023-07-13
    有用
    回复
  • 飞越
    飞越
    2022-08-23

    遇到一样的问题,似乎无解,好恶心

    2022-08-23
    有用
    回复
  • 茜茜又困了🐽
    茜茜又困了🐽
    2022-08-03
    你在wxml里使用了device-list这个组件,加载这个组件时,生命周期函数自然就执行一遍了
    


    2022-08-03
    有用
    回复 3
    • 康岩
      康岩
      2022-08-03
      但是device-list组件最终是没有显示的,detached生命周期函数也没有执行
      2022-08-03
      回复
    • 茜茜又困了🐽
      茜茜又困了🐽
      2022-08-03回复康岩
      1. 看看dom结构,再对组件生命周期进行理解
      2. 为组件设置wx:if,在父页面js中添加定时器,控制组件的显示隐藏,看看组件的生命周期函数是如何执行的
      2022-08-03
      回复
    • 康岩
      康岩
      2022-08-03回复茜茜又困了🐽
      本意是希望【插槽内的组件】在显示的时候自动执行一个函数,但是小程序这种插槽机制实现不了。 
      本身插槽的机制已经控制了组件的展示,但是还需要用 wx:if 再做一次控制(而已wx:if 的初始时一定要时false),感觉这种方式很啰嗦,但是可以解决问题
      2022-08-03
      回复
登录 后发表内容