微信小程序 子组件与父组件之间的传参

微信小程序 子组件与父组件的传参

父组件向子组件传参

1. 父组件（页面）向子组件 传递数据是通过 标签属性 的方式来传递的

   以下以子组件tab为例

   <tab aaa="123"></tab>
   

   自定义的属性名为aaa，属性值为123

2. 子组件接受数据

   properties:{
       // 要接收的数据名称
       aaa:{
           // type  要接收的数据类型
           type:String,
           // value 默认值
           value:""
       }
   }
   

3. 子组件接收到的数据可以随意使用

   <view>
   	{{aaa}}
   </view>
   

   子组件接收的数据可以可以在子组件的方法中使用，然后把数据放到data中，可能不会出现问题，但是数据并没有改变

子组件向父组件传参

子向父传递参数，是通过事件的方式传递

主要通过this.triggertEvent(' ',{ },{ })方法实现的
参数一：自定义事件名称，这个名称是在页面调用组件时bind的名称
参数二：可以将想要的属性拿到
参数三：可以不写

1. 给自子组件的标签上绑定事件

   // tab.wxml 组件
      <button type="primary" size="mini" bindtap="handleTap" data-index="{{index}}">传值</button>
   
   

2. 编写事件函数和自定义事件

   // tab 组件 js
   Component({
   	methods: {
   	 handleTap(e) {
         let index = this.data.index;
         // 自定义一个事件，并且传值
         this.triggerEvent('myevent',{params: index},{})
       },
   	}
   })
   
   

3. 父组件使用子组件的数据

   HTML

   <tab bindmyevent="handleMyEvent"></tab>
   

   JS

   handleMyEvent(e){
   	//获取子组件的数据
   	console.log(e.detail)
   }