微信小程序父子传值

轮播图子组件传值

  为什么要用父子传值？父子传值有什么好处？

答：父子传值类似于一个组件，组件封装调用，在公共使用组件的地方直接调用、可以重复利用（对于新手小白来说可以把组件理解为一个函数，如果需要这个方法，就调用一遍这个函数）

以轮播图传值为栗子

1.在pages同级目录下创建mycom文件。

2.在父组件wxml中导入子组件  tag为变量值。

<mycom1 tag="{{lunArr}}" bind:chuan="getinfo"></mycom1>

3.父组件.json文件下导入mycom1标签

"usingComponents": {
    "mycom1":"../../mycom/mycom1/mucom1"
  },

4.引入子组件的js文件要接受tag的type类型

 properties: {
tag:{
type:Array,
}
},

5.子组件直接引入传过来的参数，可以理解为实参

<swiper indicator-dots="true" autoplay="true" interval="1000" duration="500">
    <block wx:for="{{tag}}" wx:key="index">
      <swiper-item>
        <view class="imgbox">
          <image src="{{item.imgurl}}" mode="widthFix"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>

注：以上案例中，lunArr没有定义数据。

子组件向父组件传值，需要通过事件绑定。

 <button bindtap="getFun">
点我传参
  </button>

子组件绑定事件后，通过子组件js文件methods方法导入

methods: {
getFun(){
  let obj={
    name:"剑非出我心",
    age:18
  }
  //第一个值为事件参数，第二个值为传递参数的值
  this.triggerEvent("chuan",obj)
}
  }

父组件HTML文件中接受

chuan为事件名称，getinfo是函数方法

<mycom1 tag="{{lunArr}}" bind:chuan="getinfo"></mycom1>

父组件js文件配置

 Page({
 getInfo(e){
console.log(e.detail)
  },
  })

点击后就可以传值了。