父组件怎样调用子组件的方法？

分类：uni-app

uniapp

父组件怎样调用子组件的方法？

就是一个自定义的密码支付框

input 有没有像 vue里的 v-mode？

密码框的值怎样清空？
我尝试了两种方法，都不行
pay-box.nml

        hide: function() {  
            this.showFlag = false;  
            this.password = '';  
        }

         hide: function() {  
            this.showFlag = false;  
            this.password = '';  
                this.$element("pay_password").attr.value = '';  
        }

没有用，但是密码框内还有密码的黑点，也就是值好像还在

有没有双向绑定的东西？

新建文件夹.zip

2018-04-19 11:51 负责人:无分享

2 个回复

最佳回复

Trust - 少说废话

请上传一个示例demo，补充描述具体的需求。

通过公共方法 $child() 获取子组件对象，即可完成后续操作。

参考文档：页面与组件 -> 公共方法文档

将附件中的代码做简单修改即可，index.nml 内容如下：

<import name="pay-box" src="./pay-box"></import>  
<template>  
  <div>  
    <input type="button" value="立即购买" class="grade-top-btn" onclick="openPayBox" />  
    <pay-box id="pay-box"></pay-box>  
  </div>  
</template>

module.exports = {  
  data: {  
    password: ''  
  },  
  onInit() {  
    this.$on('sub', this.subEvent);  
  },  
  openPayBox: function () {  
    this.$child('pay-box').showFlag = true;  
  },  
  subEvent: function (event) {  
    this.password = event.detail.password;  
  }  
}

pay-box.nml

change: function (event) {  
  this.password = event.value;  
},  
confirm: function () {  
  this.hide();  
  this.$dispatch('sub', {  
    password: this.password  
  });  
}

其实可以不用传参这么麻烦，修改了子组件的某个属性后，可以直接在父组件读取到子组件对象，进而读取到子组件的属性值。