需求分析我们在自定义子组件中的props属性中定义变量isShow,如下所示: 在父组件引用自定义子组件时,通过自定义组件的is-show属性赋值,自定义组件的isShow变量就能够获取父组件传入的值,从而通过if="{{isShow}}"控制子组件显示或隐藏。 父组件代码片段: 子组件代码片段: 解决方法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-direction: column; } </style> 欲了解更多详情,请参见: props介绍: https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-script-0000001073643163#section13465323173415
|