微信小程序组件传参,父传子,子传父通信

父传子实现过程

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)
}