AppGallery Connect：根節(jié)點div組件使用if或show屬性報錯

問題描述

在某些場景下，我們需要對組件的顯示和隱藏做處理，因此需要使用到if或show屬性來控制組件的顯示或隱藏，但是在根節(jié)點的div組件上使用if/show時，無法控制顯示或隱藏。

問題分析

這是因為華為快應用ide的編譯器對根節(jié)點有限制，無法在根節(jié)點上使用if或show屬性，ide報錯信息如下：

解決方法

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

示例代碼如下：

復制

<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="點擊跳轉(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é)點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="點擊跳轉(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>