这篇文章主要介绍“微信小程序父子组件通信怎么实现”，在日常操作中，相信很多人在微信小程序父子组件通信怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序父子组件通信怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
组件间的基本通信方式有以下几种：
WXML 数据绑定：用于父组件向子组件的指定属性设置数据。
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过
this.selectComponent()方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
父组件通过 properties 属性给子组件传递数据：
// 父组件 home.wxml<search-input placeholderText="搜明星、达人"></search-input>// 子组件 searchInput.wxml<input placeholder="{{placeholderText}}"/>// 子组件 searchInput.jsComponent({ properties: { placeholderText:{ type: String, value: '请输入' } }})子组件通过自定义事件给父组件传递数据：
自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
// 子组件 searchInput.wxml<input bindconfirm="handleSearch"/>// 子组件 searchInput.jsComponent({ methods: { handleSearch(){ // 自定义组件触发事件时，需要使用 triggerEvent 方法指定事件名、detail 对象和事件选项。 this.triggerEvent('confirmSearch', {value: '我是输入的值'}, {}); } }})// 引用自定义组件的页面 home.wxml// 可以在引用自定义组件的页面通过 bind 监听子组件触发的事件<search-input bindconfirmSearch="handleSearch"></search-input>// 父组件 home.jsPage({handleSearch(e){const value = e.detail.value;}})triggerEvent()：
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail 对象和触发事件的选项。
触发事件的选项包括：
bubbles：事件是否冒泡。
composed：事件是否可以穿越组件边界。属性值为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部。
capturePhase：事件是否拥有捕获阶段。
<-- custom-li.wxml --><view> <view bindtap="liEventListener">我是自定义的 li</view></view>// custom-li.jsComponent({ relations: { '../custom-ul/custom-ul': { type: 'parent', } }, methods: { liEventListener: function(){ this.triggerEvent('click', {}) // 触发 liPageEventListener // this.triggerEvent('click', {}, { bubbles: true }) // 依次触发 liPageEventListener、ulPageEventListener // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次触发 liPageEventListener、// 依次触发 liPageEventListener、ulPageEventListener、ulPageEventListener } }})<!-- custom.wxml --><view bindclick="ulEventListener"> <view class="header">我是自定义的 ul</view> <slot></slot></view><!-- index.wxml --><view><custom-ul bindclick="ulPageEventListener"> <custom-li bindclick="liPageEventListener"></custom-li></custom-ul></view>父组件通过获取子组件实例来调用子组件的数据和方法：
可在父组件里调用 this.selectComponent() 来获取子组件的实例对象，调用时需要传入一个匹配选择器 selector。
// 父组件home.wxml<search-input class="home-search"></search-input>//父组件 home.jsPage({ handleChangeTabs () { const searchImput = this.selectComponent('.home-search'); }})默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例，将返回 null。如果想让一个组件在上述条件下依然能被 selectComponent 返回，可使用内置 behavior: wx://component-export 自定义其返回结果。使用该 behavior 时，自定义组件中的 export 定义段将用于指定组件被 selectComponent 调用时的返回值。
// 自定义组件 my-component 内部Component({ behaviors: ['wx://component-export'], export() { return { myField: 'myValue' } }})<!-- 父组件使用自定义组件 --><my-component id="the-id" />// 父组件调用const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }到此，关于“微信小程序父子组件通信怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
