微信小程序开发系列（三十五）·自定义组件的属性properties

微信小程序开发系列（三十四）·自定义组件的创建、注册以及使用（数据和方法事件的使用）_wx小程序组件开发-CSDN博客

目录

1.  组件的属性

2.  组件的使用

3.  细节描述

---

1.  组件的属性

        Properties是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和data一同用于组件的模板渲染。

        找到上一章节的如下位置：

        可以看到Properties所在的位置，由于这个组件实在首页使用的，因此我们需要找到首页位置。

2.  组件的使用

        找到index.wxml文件，编写如下代码，给custom-checkbox附加属性：

<!-- <button type="warn" bind:tap="getData">获取数据</button> -->

<button type="primary" bind:tap="delHandler">删除商品</button>

<view class="line"></view>

<!-- label 文本显示的内容 -->
<!-- position 控制文本显示的位置 -->
<custom-checkbox label="我已阅读并同意 用户协议 和 隐私协议" position="right" />

<view class="line"></view>

<custom-checkbox label="匿名提交" position="left" />

        目前给组件内部创建了两个属性，这就需要到组件内部进行接收，找到Properties所在的位置编写如下代码进行接收：

  /**
   * 组件的属性列表：组件的对外属性，主要用来接收组件使用者传递给组件内部的属性以及数据
   */
  properties: {
    //如果需要接受传递的属性，有两种方式：全写、简写
    //全写
    //label: String

    //简写
    label:{
      //type 组件使用者传递的数据类型
      //数据类型：String、Number、Boolean、Object、Array
      //也可以设置为null，表示不限制类型
      type: String,
      value: ''
    },

    position:{
      type: String,
      value: 'right'
    }

  },

        找到文件custom-checkbox.wxml，进行渲染接收到的信息：

    <view>
     <text>{{ label }}</text>
    </view>

        此时刚刚编写的就可以显示出来了： 

        对此时的布局不满意我们也可以对其样式进行更改，找到custom-checkbox.scss文件，编写代码：

.custom-checkbox-box{
  display: flex;
  align-self: center;
}

        使用  display: flex;可以使复选框和文本在同一行展示，使用  align-self: center;可以在垂直方向居中。

        为了调动复选框在左边还是在右边显示，可以根据类名.left和.right来分别设置不同的 flex 方向。我们可以先找到custom-checkbox.scss文件，创建.custom-checkbox-box.left和.custom-checkbox-box.right：

.custom-checkbox-box.left{
  flex-direction: row-reverse;
}

.custom-checkbox-box.right{
  flex-direction: row;
}

        然后找到custom-checkbox.wxml文件，更改代码，使用三目运算符进行判断：

  <view class="custom-checkbox-box {{ position === 'right' ? 'right' : 'left' }}">

        文章开头，我们编写的代码：

<!-- <button type="warn" bind:tap="getData">获取数据</button> -->

<button type="primary" bind:tap="delHandler">删除商品</button>

<view class="line"></view>

<!-- label 文本显示的内容 -->
<!-- position 控制文本显示的位置 -->
<custom-checkbox label="我已阅读并同意 用户协议 和 隐私协议" position="right" />

<view class="line"></view>

<custom-checkbox label="匿名提交" position="left" />

        对position进行判断：

3.  细节描述

        在这里程序基本完成，不过在运行玩以后通过“调试器”，我们可以看到复选框的右侧会有一些间隙，但是左侧没有：

        为了样式的好看，我们可以为复选框左侧添加一些样式，添加类名class="custom-checkbox"：

    <checkbox class="custom-checkbox" checked="{{ isChecked }}" bind:tap="updateChecked"></checkbox>

        然后找到找到custom-checkbox.scss文件，编写：

.custom-checkbox{
  margin-left: 10rpx;
}

        这里若是我们想要获取复选框当前状态，可以找到custom-checkbox.js文件，编写如下代码：

      console.log(this.properties.label)

        我们也可以在组件内部进行修改：

        label:'在组件内部也可以修改 properties 中的数据'

        此时custom-checkbox.js文件完整代码：

// components/custom-checkbox/custom-checkbox.js
Component({

  /**
   * 组件的属性列表：组件的对外属性，主要用来接收组件使用者传递给组件内部的属性以及数据
   */
  properties: {
    //如果需要接受传递的属性，有两种方式：全写、简写
    //全写
    //label: String

    //简写
    label:{
      //type 组件使用者传递的数据类型
      //数据类型：String、Number、Boolean、Object、Array
      //也可以设置为null，表示不限制类型
      type: String,
      value: ''
    },

    position:{
      type: String,
      value: 'right'
    }

  },

  /**
   * 组件的初始数据：用来定义当前组件内部所需要的数据
   */
  data: {
    isChecked:false
  },

  /**
   * 组件的方法列表：在组件中所有的事件处理程序，都需要写到methods方法中
   */
  methods: {
    // 更新复选框状态
    updateChecked(){

      // 通过取反isChecked的值来获取每次事件点击后的值
      // 例如初始时false，点击后为true，即对false取反
      this.setData({
        isChecked:!this.data.isChecked,
        label:'在组件内部也可以修改 properties 中的数据'
      })

      // console.log(this.properties.label)

    }
  }
})

        此时custom-checkbox.scss文件完整代码：

/* components/custom-checkbox/custom-checkbox.wxss */
.custom-checkbox-container{
  display: inline-block;
}

.custom-checkbox-box{
  display: flex;
  align-self: center;
}

.custom-checkbox-box.left{
  flex-direction: row-reverse;
}

.custom-checkbox-box.right{
  flex-direction: row;
}

.custom-checkbox{
  margin-left: 10rpx;
}

 微信小程序开发_时光の尘的博客-CSDN博客