04 组件数据、事件与属性

一.数据来源的三种途径

• 固定在WXML中
• 固定在JS中，与WXML进行绑定显示
• 有服务器传回，加载到JS中，与WXML进行绑定显示

二.数据绑定

1.wxml中使用data中的数据

• 在js中的data下定义变量内容，可以在页面使用{{}}进行数据绑定

• 实例代码

  • index.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        /* 定义变量count,数据绑定 */
        count: 10,
        likeStatus: false,
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 组件的方法列表
       */
      methods: {}
    })
    

  • index.wxml使用数据绑定

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>
    

2.组件的properties属性

• 组件的属性定义在properties中，定义的每一个属性都是对象，分别包含type(必填)、value(选填)和observer(选填)三个属性值

• wxml绑定的方式与data相同，使用{{}}的方式进行绑定

• 实例代码

  • index.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        likeStatus: {
          // type是必填字段,表示属性的类型
          type: Boolean,
          // value是选填字段,表示属性的默认值
          value: true,
          // observer是选填字段
          observer: ()=> {}
        },
        count: {
          type: Number
          // Number类型value默认是0
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        /* 定义变量count,数据绑定 */
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        onLike: (event) => {
          console.log(event)
        }
      }
    })
    

  • index.wxml

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>
    

• 获取properties的属性值的方式是let variable = this.properties.properties属性名

3.动态赋值

• 使用this.setData({属性名:属性值})的方式动态赋值，从而在页面使用{{}}可以动态修改对应内容

• 实例代码

  • index.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        likeStatus: {
          // type是必填字段,表示属性的类型
          type: Boolean,
          // value是选填字段,表示属性的默认值
          value: false,
          // observer是选填字段
          observer: ()=> {}
        },
        count: {
          type: Number
          // Number类型value默认是0
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        /* 定义变量count,数据绑定 */
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        onLike: function(event) {
          let like = this.properties.likeStatus;
          let count = this.properties.count;
          
          // this.setData({})指明要更新的变量
          this.setData({
            count: like?count-1:count+1,
            likeStatus: !like
          });
        }
      }
    })
    

  • index.wxml

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>