微信小程序-父子组件之间的通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序-父子组件之间的通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

父子组件之间通信的3种方式：

属性绑定
1. 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
2. 子组件在properties节点中声明对应的属性并使用。代码：
```
//子组件的properties节点
properties:{
    count:Number
}

//子组件的wxml结构
<text>子组件count的值为：{{count}}</text>
```

事件绑定

用于子组件向父组件传递数据，可以传递任意数据

事件绑定用于实现子向父传值，可以传递任意类型的数据，使用步骤：

在父组件的js中，定义一个函数，这个函数即将通过自定义时间的类型，传递给子组件

//在父组件中定义syncCount方法
//将来，这个方法会被传递给子组件，供子组件进行调用
syncCount(){
    console.log('syncCount')
}

在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

<!--使用bind:自定义事件名称（推荐：结构清晰）-->
<my-test3 count="{{count}}" bind:sync='syncCount'></my-test3>

<!--或在bind后面直接写上自定义事件名称-->
<my-test3 count="{{count}}" bindsync='syncCount'></my-test3>

在子组件的js中，通过调用this.triggerEvent('自定义事件名称'，{/参数对象/})，将数据发送到父组件

//子组件的wxml结构
<text>子组件中，count值为：{{count}}</text>
<button type="primary" bindtap="addCount">+1</button>

//子组件的js代码
methods:{
    addCount(){
        this.setData({
            count:this.properties.count+1
        })
        this.triggerEvent('sync',{value:this.properties.count})
    }
}

在父组件的js中，通过e.detail获取到子组件传递过来的数据

syncCount(e){
    this.setData({
        count:e.detail.value
    })
}

获取组件的实例
1. 父组件还可以通过this.selectComponent("id或者class选择器")获取子组件实例对象
2. 这样就可以直接访问子组件的任意数据和方法文章来源地址https://www.toymoban.com/news/detail-435374.html

到了这里，关于微信小程序-父子组件之间的通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

微信小程序-父子组件之间的通信

父子组件之间通信的3种方式：

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2