前端实习第4天--支付宝小程序事件绑定及组件传值

事件绑定

小程序的事件绑定和正常的事件绑定使用起来差不多，不过小程序的事件绑定不能传参数，只能通多data-参数名来传给函数，再通过默认的e事件对象来获取数据。

下面以一个小案例来演示：

需求：输入一个数，在下面显示出来，两个按钮，分别对输入的数进行+、-操作

axml代码：

<view>
  需求：输入一个数，在下面显示出来，两个按钮，分别对输入的数进行+、-操作
</view>
<view>
  <input placeholder="Input" onInput="changeValue" />
  <view>
    {{num}}
  </view>
  <button size="default" type="primary" onTap="changenum" data-num="1">+</button>
  <button size="default" type="primary" onTap="changenum" data-num="-1">-</button>
</view>

js代码：

Page({
  data: {
    num:0
  },
  onLoad() {},
  changeValue(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  changenum(e){
    // console.log(e);
    this.setData({
      num: parseInt(this.data.num) + parseInt(e.target.dataset.num)
    })
  }
});

运行结果：

这里面onInput是input改变事件，onTap是点击事件，事件后面是绑定的函数方法。由于事件绑定不能传递参数，所以使用data-num=""来自定义属性传递参数，在js定义的事件方法中通过e对象来获取属性值。

组件传值

组件传值分为父组件向子组件传值，还有子组件向父组件传值。

父组件向子组件传值：

基本上和Vue的差不多。现在父组件的data中定义变量，然后在组件标签上<ddd num="{{num}}" onShowage="onShowage"></ddd>写上传递的变量名和变量值，最后直接在子组件中使用即可。

<view>

  bbb传值:{{num}}

</view>

注意：子组件props可以给父组件传递的变量设置初始值，当父组件没传值时，子组件将会使用props中的初始值。

子组件向父组件传值：

1、首先在父组件中定义事件

onShowage(data){

    this.setData({

      age:data

    });

  }

2、把自定义事件传递给子组件<ddd num="{{num}}" onShowage="onShowage"></ddd>

3、在子组件methods中定义一个方法调用传过来的自定义事件并传递参数

onShowage(){

      this.props.onShowage(this.data.age);

    }

4、调用子组件方法。

父组件axml：

<view>
  bbb page
  {{age}}
</view>
<view>
  ---------------------------
</view>
<view>
  <ddd num="{{num}}" onShowage="onShowage"></ddd>
</view>

父组件js：

Page({
  data: {
    num:10,
    age:0
  },
  onLoad() {},
  onShowage(data){
    this.setData({
      age:data
    });
  }
});

子组件axml：

<view>
  ddd component
</view>
<view>
  bbb传值:{{num}}
</view>
<button onTap="changeData">改变data</button>

子组件js：

Component({
  data:{
    age:39
  },
  props:{
    num:{
      type:Number,
      value:0
    }
  },
  didMount(){
    this.onShowage();
  },
  didUpdate(){
    this.onShowage();
  },
  methods:{
    onShowage(){
      this.props.onShowage(this.data.age);
    },
    changeData(){
      this.setData({
        age:this.data.age + 1
      });
    }
  }
})

运行效果：