找回密码
 立即注册
搜索

如何在自定义子组件中控制if属性

1
回复
391
查看
[复制链接]

46

主题

47

帖子

465

积分

 楼主| 2021-9-3 10:57:50 显示全部楼层 |阅读模式

需求描述

当父组件引用自定义子组件时,需要控制自定义子组件的显示和隐藏,应该怎么做?

本内容讲解如何在父组件中控制子组件的if属性。


回复

使用道具 举报

23

主题

142

帖子

825

积分

2021-9-3 11:03:12 显示全部楼层

需求分析

我们在自定义子组件中的props属性中定义变量isShow,如下所示:

image.png

在父组件引用自定义子组件时,通过自定义组件的is-show属性赋值,自定义组件的isShow变量就能够获取父组件传入的值,从而通过if="{{isShow}}"控制子组件显示或隐藏。

父组件代码片段:

image.png

 

子组件代码片段:

image.png

解决方法

Hello.ux

<import name="t-item" src="../Test/t-item"></import>

<template>

  <div style="width: 100%">

    <input type="button" value="改变if" onclick="change" />

    <t-item is-show="{{isShow}}"></t-item>

  </div>

</template>

 

<script>

  export default {

    data: {

      isShow: true

    },

    onInit() {

    },

    change: function () {

      this.isShow = !this.isShow

    }

  };

</script>

 

<style lang="less">

</style>

 

t-item.ux

<template>

  <div class="col">

    <text if="{{isShow}}">我是子组件</text>

  </div>

</template>

 

<script>

  export default {

    data: {

    },

    props: {

      isShow: {

        default: true,

      },

    }

  }

</script>

 

<style lang="less" >

  .col {

    flex-directioncolumn;

  }

</style>

 

欲了解更多详情,请参见:

props介绍:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-script-0000001073643163#section13465323173415


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册