AppGallery Connect：根節(jié)點(diǎn)div組件使用if或show屬性報(bào)錯(cuò)

問(wèn)題描述

在某些場(chǎng)景下，我們需要對(duì)組件的顯示和隱藏做處理，因此需要使用到if或show屬性來(lái)控制組件的顯示或隱藏，但是在根節(jié)點(diǎn)的div組件上使用if/show時(shí)，無(wú)法控制顯示或隱藏。

問(wèn)題分析

這是因?yàn)槿A為快應(yīng)用ide的編譯器對(duì)根節(jié)點(diǎn)有限制，無(wú)法在根節(jié)點(diǎn)上使用if或show屬性，ide報(bào)錯(cuò)信息如下：

解決方法

方法一：在根節(jié)點(diǎn)div下嵌套一層子div，在子div上使用if/show屬性

示例代碼如下：

復(fù)制

<template>

  <div class="container">

    <div show="true">

      <input class="parent-demo" type="button" value="父組件向子組件傳值" onclick="evtType1Emit" />

      <comp say="{{say}}" propObject="{{propObject}}"></comp>

      <input type="button" value="點(diǎn)擊跳轉(zhuǎn)" onclick="openweb" />

      <select style="width:200px;height:300px;border-color:#4169e1;border-width:1px">

        <option value="夫子廟" selected="false">夫子廟</option>

        <option value="中山陵" selected="true">中山陵</option>

        <option value="老門東" selected="false">老門東</option>

      </select>

    </div>

  </div>

</template>

方法二：在根節(jié)點(diǎn)div下嵌套stack組件，在stack組件上使用if/show屬性

示例代碼如下：

<template>

  <div class="container">

    <stack show="true">

      <input class="parent-demo" type="button" value="父組件向子組件傳值" onclick="evtType1Emit" />

      <comp say="{{say}}" propObject="{{propObject}}"></comp>

      <input type="button" value="點(diǎn)擊跳轉(zhuǎn)" onclick="openweb" />

      <select style="width:200px;height:300px;border-color:#4169e1;border-width:1px">

        <option value="夫子廟" selected="false">夫子廟</option>

        <option value="中山陵" selected="true">中山陵</option>

        <option value="老門東" selected="false">老門東</option>

      </select>

    </stack>

  </div>

</template>