微信小程序组件父传子,子传父通信
父传子实现过程
HTML
//通过标签给子组件绑定要传递的值 绑定的值是data中声明好的
<search sousuo="{{sousuo}}" binditem="handleitem"></search>
父JSON
//父要用子组件的花需要在JSON中引入子组件
{
"usingComponents": {
"子组件名称":"子组件路径"
},
JS内容
//JS部分
data:{
sousuo:[{title:"阳光水城一期",piny:"dasda",dizhi:"杨公路"},
{title:"阳光水城二期",piny:"dasda",dizhi:"杨公路"},
{title:"阳光水城三期",piny:"dasda",dizhi:"杨公路"},
{title:"阳光水城四期",piny:"dasda",dizhi:"杨公路"},
{title:"阳光水城五期",piny:"dasda",dizhi:"杨公路"}]
}
子组件接收父组件的方式
JS内容
//需要在JS中的properties:{}接收父组件传递过来的值 type声明类型 value 值的类型
properties:{
sousuo:{
type:Array,
value:[]
}
}
//接收过来的值可以直接当作data中的值使用即可 所以直接拿来wx:for就行了
//WXML 内容
<view bindtap="handleNeiRon" wx:for="{{sousuo}}" wx:key="index">
<view>{{item.title}}</view>
</view>
子传父实现过程
子组件
WXML内容
//bindtap绑定事件 通过事件给父组件传递需要传递是值即可
<view bindtap="handleNeiRon" data-item="{{item}}" wx:for="{{sousuo}}" wx:key="index">
<view>{{item.title}}</view>
</view>
JS内容
//通过this.triggerEvent 给父组件传递需要传递的值
methods: {
handleNeiRon(e){
console.log(e)
//父组件需要绑定的item事件 跟e传递的值
this.triggerEvent("item",e)
},
}
父接收的方式
WXML 内容
// binditem就是绑定的子组件的事件后面的handleitem可以随意取名
<search sousuo="{{sousuo}}" binditem="handleitem"></search>
JS内容
//直接打印即可获取到子组件传递的值 再做自己想做的事即可
handleitem(e){
console.log(e)
}