微信小程序 子组件与父组件的传参
父组件向子组件传参
-
父组件(页面)向子组件 传递数据是通过 标签属性 的方式来传递的
以下以子组件tab为例
<tab aaa="123"></tab>
自定义的属性名为aaa,属性值为123
-
子组件接受数据
properties:{ // 要接收的数据名称 aaa:{ // type 要接收的数据类型 type:String, // value 默认值 value:"" } }
-
子组件接收到的数据可以随意使用
<view> {{aaa}} </view>
子组件接收的数据可以可以在子组件的方法中使用,然后把数据放到data中,可能不会出现问题,但是数据并没有改变
子组件向父组件传参
子向父传递参数,是通过事件的方式传递
主要通过this.triggertEvent(' ',{ },{ })
方法实现的
参数一:自定义事件名称,这个名称是在页面调用组件时bind的名称
参数二:可以将想要的属性拿到
参数三:可以不写
-
给自子组件的标签上绑定事件
// tab.wxml 组件 <button type="primary" size="mini" bindtap="handleTap" data-index="{{index}}">传值</button>
-
编写事件函数和自定义事件
// tab 组件 js Component({ methods: { handleTap(e) { let index = this.data.index; // 自定义一个事件,并且传值 this.triggerEvent('myevent',{params: index},{}) }, } })
-
父组件使用子组件的数据
HTML
<tab bindmyevent="handleMyEvent"></tab>
JS
handleMyEvent(e){ //获取子组件的数据 console.log(e.detail) }