1. data データ

マイクロプログラムのコンポーネントでは、テンプレートのレンダリングに使用されるプライベートデータは、data ノード内で定義する必要があります。以下に例を示します。

Component({
  /**
   * コンポーネントの初期データ
   */
  data: {
    internalValue: 0 // 内部データの初期値
  }
})

2. methods メソッド

コンポーネント内のイベントハンドラやカスタムメソッドは、methods ノードに定義します。サンプルコードは以下の通りです。

Component({
  /**
   * コンポーネントのメソッドリスト
   */
  methods: {
    incrementValue() { // イベントハンドラ
      this.setData({ internalValue: this.data.internalValue + 1 });
      this._displayCurrentValue(); // this を使ってカスタムメソッドを直接呼び出す
    },
    _displayCurrentValue() { // カスタムメソッドは _ で始めることを推奨
      wx.showToast({
        title: '現在の値は：' + this.data.internalValue,
        icon: 'none'
      });
    }
  }
})

3. properties プロパティ

マイクロプログラムのコンポーネントでは、properties は外部からコンポーネントに渡されるデータを受け取るための公開属性です。以下に例を示します。

Component({
  /**
   * コンポーネントのプロパティ定義リスト
   */
  properties: {
    upperLimit: { // プロパティの完全な定義方法【デフォルト値を指定する必要がある場合、この方式を使用することを推奨】
      type: Number, // プロパティのデータ型
      value: 10 // プロパティのデフォルト値
    },
    upperLimit: Number // プロパティの簡略定義方法【デフォルト値を指定する必要がない場合、この簡略方式を使用可能】
  }
})

4. data と properties の違い

コンポーネントにおいて、properties プロパティと data データの基本的な使い方は同じで、どちらも読み書き可能です。ただし、以下の点が異なります。

• data は、コンポーネントのプライベートデータを格納する傾向があります。
• properties は、外部からコンポーネントに渡されるデータを格納する傾向があります。

Component({
  methods: {
    showInfo() {
      console.log(this.data); // 出力結果：{internalValue: 0, upperLimit: 10}
      console.log(this.properties); // 出力結果：{internalValue: 0, upperLimit: 10}
      // 結果が true になるため、data データと properties プロパティは本質的に同じで、どちらも読み書き可能であることが証明されます。
      console.log(this.data === this.properties);
    }
  }
})

5. setData を使って properties の値を変更する

data データと properties プロパティは本質的に同じであるため、properties の値もページのレンダリングに使用でき、setData を使って properties 内のプロパティに再代入することも可能です。以下に例を示します。

// コンポーネントの .wxml ファイルで properties の値を使用する
<view>上限値の現在の値は：{{upperLimit}}</view>

Component({
  properties: {
    upperLimit: Number // プロパティを定義
  },
  methods: {
    incrementValue() { 
      this.setData({ upperLimit: this.properties.upperLimit + 1 }); // setData を使ってプロパティの値を更新
    }
  }
})