小程序中也有组件通信,那么如何实现呢?今天我们就一起来学习学习
组件通信就是:子传父,父传子,兄弟传值
1. 首先来说说父传子
小程序中的父传子和vue中的父传子很相似
1.1 首先创建一个组件:在子组件文件夹上–右建–选择【新建component】选项
1.2 引入组件,在父组件中的json文件的usingComponents添加要使用的子组件
1.3 父组件中引入子组件,给子组件添加属性
<view>
<Child title="好好学习,天天向上"/>
</view>
1.4 在子组件的js文件的properties中接受传过来的值
格式为:
properties: {
title:{
type:String, //接受的值的类型
value:"你是渣渣?" //默认值,如果父组件没给子组件传值,页面上显示该数据
}
},
简易版:properties: {
title:String
}
1.5 在子组件的wxml中操作
<view>
<view>我们都是祖国的花朵</view>
<view>
{{title}} //将从组件中接收的值渲染到页面
</view>
</view>
效果如下:
2. 接下来说子传父
小程序的子传父和vue也很相似,接下来我们说说具体步骤
1. 在子组件中触发一个事件
<view>
<button bindtap="toFatherevent">
点我把子组件的值传给父组件
</button>
</view>
2. 接下来在子组件的js中对应的toFatherevent上添加派发的事件和要向父级传递的数据
methods: {
toFatherevent(){
this.triggerEvent('tofather','我想把我的值传给我的爸爸')
},
}
3. 父组件监听子组件派发过来的事件和要接收的数据
格式为:bind要监听的事件名=“回调方法”
<view>
<Child bindtofather="giveme" />
</view>
4. 在父组件的js中通过giveme事件获取数据
data: {
title:"" //定义一个属性
},
giveme(e){
console.log(e.detail) //在控制台输出我们想接收的值
this.setData({
title:e.detail //更新数据
})
},
在页面中展示:
<view>
<Child bindtofather="giveme" />
{{title}}//渲染到视图上
</view>
最终效果图如下:
3. 最后来思考兄弟传值
兄弟传值:就是前两者的结合
假如两个子组件为A1,A2,另一个父组件为B
让组件A1利用子传父将值传给B,具体步骤如上
B接收A1传过来的值,然后利用父传子将值传给A2,具体步骤如上
最后在A2中接收即可