@作者 : SYFStrive
@博客首页 : HomePage
📜: 微信小程序
📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗
📌:觉得文章不错可以点点关注 👉:专栏连接🔗
💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞
👉 微信小程序(🔥)
自定义组件 - 父子组件之间的通信
1、父子组件之间通信的 3 种方式
① 属性绑定
- 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据
父 👉 子
② 事件绑定
- 用于子组件向父组件传递数据,可以传递任意数据
子 👉 父
③ 获取组件实例
- 父组件还可以通过 this.selectComponent()
获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法父 👉 子
2、属性绑定
属性绑定用于实现父向子传值,而且只能传递普通类型的数据
,无法将方法传递给子组件。父组件的示例代码
如👇
子组件在 properties 节点中声明对应的属性并使用。
WXML
<text4 data="{{value}}"></text4>
<view>-----</view>
<view>这是父组件的值:{{value}}</view>
WXJS
data: {
value:18
},
// ------------子组件------------
js
properties: {
data:Number
},
WXML
<view>这是子组件的值:{{data}}</view>
3、事件绑定
事件绑定用于实现子向父传值,可以传递任何类型的数据。
使用步骤如 👇
① 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
dataAdd(e){
console.log("我被调用了");
},
② 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件
<text4 data="{{value}}" bind:dataAdd="dataAdd"></text4>
<view>-----</view>
<view>这是父组件的值:{{value}}</view>
③ 在子组件的 js 中,通过调用 this.triggerEvent(‘自定义事件名称’, {name:“this.XXX”}) ,将数据发送到父组件
/**
* 组件的方法列表
*/
methods: {
DataAdd(){
this.setData({
data:this.properties.data+1
}),
this.triggerEvent("dataAdd",{value:this.properties.data})
}
},
④ 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据
dataAdd(e){
console.log("我被调用了");
console.log(e.detail.value);
this.setData({
value:e.detail.value
})
},
效果如 👇
4、获取组件实例
可在父组件里调用 this.selectComponent(“id或class选择器”) ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(“.XXX 或 #XXX”)。
WXML
<text4 data="{{value}}" bind:dataAdd="dataAdd" class="text4"></text4>
<view>这是父组件的值:{{value}}</view>
<button style="color: red; margin-top: 26rpx;" bindtap="countAdd">父组件按钮</button>
WXJS
// 父组件获取子组件数据并操作子组件
countAdd(){
const text4 = this.selectComponent(".text4")
// text4.setData({
// data:text4.properties.data+1
// }),
text4.DataAdd()
},
效果如 👇
最后
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪
下篇文章再见ヾ( ̄▽ ̄)ByeBye