微信小程序父子组件通信详细介绍

网友投稿 485 2023-11-13

组件间的基本通信方式有以下几种：

WXML 数据绑定：用于父组件向子组件的指定属性设置数据。事件：用于子组件向父组件传递数据，可以传递任意数据。如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent() 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

微信小程序父子组件通信详细介绍

父组件通过 properties 属性给子组件传递数据：

?
1
2
// 父组件 home.wxml
<search-input placeholderText="搜明星、达人"></search-input>
?
1
2
3
4
5
6
7
8
9
10
11
// 子组件 searchInput.wxml
<input placeholder="{{placeholderText}}"/>
// 子组件 searchInput.js
Component({
properties: {
placeholderText:{
type: String,
value: 请输入
}
}
})

子组件通过自定义事件给父组件传递数据：

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

?
1
2
3
4
5
6
7
8
9
// 引用自定义组件的页面 home.wxml
// 可以在引用自定义组件的页面通过 bind 监听子组件触发的事件
<search-input bindconfirmSearch="handleSearch"></search-input>
// 父组件 home.js
Page({
handleSearch(e){
const value = e.detail.value;
}
})

triggerEvent()：

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail 对象和触发事件的选项。

触发事件的选项包括：

bubbles：事件是否冒泡。composed：事件是否可以穿越组件边界。属性值为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部。capturePhase：事件是否拥有捕获阶段。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<-- custom-li.wxml -->
<view>
<view bindtap="liEventListener">我是自定义的 li</view>
</view>
// custom-li.js
Component({
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
}
}
})
?
1
2
3
4
5
<!-- custom.wxml -->
<view bindclick="ulEventListener">
<view class="header">我是自定义的 ul</view>
<slot></slot>
</view>
?
1
2
3
4
5
6
<!-- index.wxml -->
<view>
<custom-ul bindclick="ulPageEventListener">
<custom-li bindclick="liPageEventListener"></custom-li>
</custom-ul>
</view>

父组件通过获取子组件实例来调用子组件的数据和方法：

可在父组件里调用 this.selectComponent() 来获取子组件的实例对象，调用时需要传入一个匹配选择器 selector。

?
1
2
3
4
5
6
7
8
// 父组件home.wxml
<search-input class="home-search"></search-input>
//父组件 home.js
Page({
handleChangeTabs () {
const searchImput = this.selectComponent(.home-search);
}
})

默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例，将返回 null。如果想让一个组件在上述条件下依然能被 selectComponent 返回，可使用内置 behavior: wx://component-export 自定义其返回结果。使用该 behavior 时，自定义组件中的 export 定义段将用于指定组件被 selectComponent 调用时的返回值。

?
1
2
3
4
5
6
7
// 自定义组件 my-component 内部
Component({
behaviors: [wx://component-export],
export() {
return { myField: myValue }
}
})
?
1
2
3
4
<!-- 父组件使用自定义组件 -->
<my-component id="the-id" />
// 父组件调用
const child = this.selectComponent(#the-id) // 等于 { myField: myValue }

到此这篇关于微信小

您可能感兴趣的文章:微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递微信小程序获取当前位置的详细步骤使用微信小程序API，调用微信的各种内置能力。微信小程序怎么加入JavaScript脚本，做出动态效果微信小程序如何设置基本的页面样式，做出用户界面UI制作微信小程序的小白简单入门教程微信小程序实现云开发上传文件、图片功能微信小程序获取用户头像昵称组件封装实例(最新版)微信小程序tabBar自定义弹窗遮挡不住解决技巧微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 JavaScript 参数
上一篇:如何做好app推广运营 ？app运营策划方案
下一篇:开发什么app符合年轻人市场?开发app如何挣钱
相关文章

 发表评论

暂时没有评论，来抢沙发吧~