WeChatミニプログラム：カスタムコンポーネントのデータ転送

WeChatミニプログラム：カスタムコンポーネントのデータ転送

転載リンクアドレス：[https://segmentfault.com/a/1190000014474289?utm_source=index-hottest](https://segmentfault.com/a/1190000014474289?utm_source=index-hottest)

I.はじめに

アプレットに再利用可能なUIと特定の機能がある場合は、カスタムコンポーネントを使用してカプセル化できます。（UIのみを再利用する必要がある場合は、テンプレートを使用できます）次に、親コンポーネントと子コンポーネントのデータ転送方法、および単純なコンポーネントと複雑なコンポーネントの例について説明します。
[この記事を最初に書いたとき、私はまだ小さなプログラムの初心者だったので、調査して要約するために公式文書を調べましたが、多くの欠点と誤りがあります。1年の降水量の後（今年は小さなプログラムではなく主にvueを書いていますが）、初心者が私の記事のために迂回するのを防ぐために、比較的多くのビューでこの記事を再編成することにしました。】

次に、親コンポーネントと子コンポーネント間でデータを転送する方法

1.親コンポーネントはデータを子コンポーネント
parent.wxmlに渡します

<my-component name="{
   
   {name}}" age="{
   
   {age}}"></my-component>

parent.js

data: {
  name: 'Peggy',
  age: 25
}

child.js

properties: {
  name: {
    type: String,
    value: '小明'
  },
  age: Number
}

親コンポーネントは値をプロパティの形式で子コンポーネントに渡し、子コンポーネントはプロパティで値を受け取り、データ型のタイプとデフォルト値の値を指定できます。
これは 、wxmlでは{ {name}}の形式で直接使用でき 、jsではthis.properties.nameとして取得できます。

2.子コンポーネントは、値
child.jsを親コンポーネントに渡します

methods: {
  changeName() {
    this.triggerEvent('changeName', {
      name: '李四'
    })
  }
}

parent.wxml

<my-component name="{
   
   {name}}" age="{
   
   {age}}" bindchangeName="changeName"></my-component>

parent.js

changeName(event) {
  console.log(event.detail)
  // { name: '李四' }
}

子コンポーネントは、this.triggerEventメソッドを使用して親コンポーネントにデータを渡します。このメソッドは3つのパラメーターを受け入れます
。this.triggerEvent（ 'myevent'、myEventDetail、myEventOption）;

myeventはメソッド名、
myEventDetailはコンポーネントの外部に渡されるデータ、
myEventOptionはバブリングするかどうかのオプション、設定できる3つのパラメーターがあります。

bubbles    默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

親コンポーネントは、イベントbindchangeName = "changeName"をリッスンします。changeNameメソッドにはイベントパラメーターがあり、コンポーネントから渡される値はevent.detailから取得できます。

3.シンプルなコンポーネント（カウンター）

1.コンポーネント機能の紹介
このコンポーネントは、テイクアウトソフトウェアで一般的に使用され、購入したい商品の数量を記録します。初期化時のプラス記号は1つだけです。プラス記号をクリックすると、数字とマイナス記号が表示され、最後に数字がコンポーネントに送信されて外部で使用されます。

2.コンポーネントの作成
最初にルートディレクトリにコンポーネントフォルダ（推奨）を作成し、次にnum-controllerフォルダ（私が取ったコンポーネント名）を作成し、このフォルダを右クリックして新しいコンポーネントを作成します。名前はインデックスです。

/components/num-controller/index.wxml

<view class="num-controller">
  <image src="images/minus.png" class="{
   
   {num <= min ?'hide': ''}}" bindtap="sub"></image>
  <text class="num">{
   
   {num}}</text>
  <image src="images/plus.png" bindtap="add"></image>
</view>

このコードは、2つのボタンと1つの数値を加算および減算するためのものです。
/components/num-controller/index.json

{
  "component": true,
  "usingComponents": {}
}

このファイルは、コンポーネントの作成時にこのコードを自動的に書き込みます。
/components/num-controller/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    nameId: {
      type: String
    },
    num: {
      type: Number,
      value: 0
    },
    int: {
      type: Number,
      value: 1
    },
    min: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    numChange() {
      this.triggerEvent('numChange', {
        num: this.properties.num,
        nameId: this.properties.nameId
      })
    },
    add() {
      this.setData({
        num: this.properties.num + this.properties.int
      })
      this.numChange()
    },
    sub() {
      this.setData({
        num: this.properties.num - this.properties.int
      })
      this.numChange()
    }
  }
})

コンポーネント内に4つのプロパティを定義しました。プロパティは、親コンポーネントから子コンポーネントに渡されるプロパティです。
nameIdは、子コンポーネントの一意性を識別するために使用されます。親コンポーネントに複数のカウンターがある場合、子コンポーネントが変更されたデータを親コンポーネントに渡したいときに使用できます。numはカウンター内
の番号を表します。デフォルトは0です
。intは加算を表します。一度に変更する量。デフォルトは1です
。minはカウンターの最小値を表します。マイナス記号はこの値と等しくなると消え、デフォルトは0です。

同時に、2つのメソッドがサブコンポーネントで定義されてい
ます。プラス記号をクリックしてトリガーし、最初にサブコンポーネント内の番号を変更し、同時にnumChangeメソッドをトリガーして変更された番号を外部に転送します。コンポーネントの;
マイナス記号をサブクリックしてトリガーし、最初に内部サブコンポーネント番号を変更し、同時にnumChangeメソッドをトリガーして、変更された番号をコンポーネントの外部に渡します。

3.コンポーネントの
紹介index.wxmlにコンポーネントを紹介したい場合：

<num-controller nameId="num1" num="{
   
   {num1}}" bindnumChange="numChange"></num-controller>
<num-controller nameId="num2" num="{
   
   {num2}}" int="{
   
   {5}}" min="{
   
   {5}}" bindnumChange="numChange"></num-controller>
<num-controller nameId="num3" num="{
   
   {num3}}" int="{
   
   {100}}" bindnumChange="numChange"></num-controller>

index.json

{
  "usingComponents": {
    "num-controller": "/components/num-controller/num-controller"
  }
}

ページ内のコンポーネントを使用するには、jsonファイルにコンポーネントを登録する必要があります。
index.js

Page({
  data: {
    num1: 0,
    num2: 10,
    num3: 100
  },
  numChange(event) {
    const {num, nameId} = event.detail
    this.setData({
      [nameId]: num
    })
  }
})

データ内のnum1、num2、およびnum3は、コンポーネントの外部から渡されたnumです。numChangeメソッドでは、event.detailを使用して、コンポーネント内のthis.triggerEventを介して渡されたデータを取得し、それに応じて論理的な変更を加えることができます。ビジネス要件に。

第四に、複雑なコンポーネント（フィルターパネル）

これはセカンダリメニューです。左側（レベル1）をクリックすると、右側（レベル2）の表示が変わります。
1.コンポーネントを作成し、コンポーネント
内にインポートします：
/components/filter-panel/index.wxml

<view class="filter-panel">
  <view class="panel-container">
    <view class="panel-left">
      ...
    </view>

    <view class="panel-right">
      ...
    </view>
  </view>
</view>

/components/filter-panel/index.json

{
  "component": true,
  "usingComponents": {}
}

外部コンポーネント：
index.wxmlにコンポーネントを導入したい場合：

<filter-panel></filter-panel>

このようにして、コンポーネントは正常に導入されました〜（実際、コンポーネント化は非常に快適で、後で多くの労力を節約できます）
2。コンポーネントと外部間のデータ転送
（1）固定データレンダリング
外部コンポーネント：
index.wxml

<filter-panel list="{
   
   {list}}" active="{
   
   {active}}"></filter-panel>

index.js

data: {
  list: [
    ['附近', '地铁站'],
    [['不限', '1km', '2km', '3km'], ['江汉路', '积玉桥', '洪山广场', '楚河汉街', '光谷广场']]
  ],
  active: [0, 0]
},

コンポーネントの内部：

/components/filter-panel/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 组件的方法列表
   */
  methods: {
    ...
  }
})

コンポーネントの外部からコンポーネントの内部にデータを転送する場合は、外部から参照するときに属性として直接渡します。
ここでは、2つの属性を渡しました
。listは、2次選択パネルによってレンダリングされたデータです。
アクティブは、ユーザーが選択したオプションデータです。

これまでは正常に表示できましたが、クリックして表示しても選択した項目が実現していません。

（2）変数データのレンダリング
コンポーネントのアクティブなアイテムを制御するアクティブな外部データ：[0、0]は、コンポーネントを介して属性の形式で内部に渡されます。

/components/filter-panel/index.wxml

<view class="filter-panel">
  <view class="panel-container">
    <view class="panel-left">
      <ul>
        <li 
          class="{
   
   {active[0] == index? 'active': ''}}" 
          wx:for="{
   
   {list[0]}}" 
          wx:key="{
   
   {index}}" 
          wx:index="index" 
          data-index="{
   
   {index}}"
          bindtap="changeLevel1"
        >
          {
   
   {item}}
        </li>
      </ul>
    </view>

    <view class="panel-right">
      <ul>
        <li 
          class="{
   
   {active[1] == index? 'active': ''}}" 
          wx:for="{
   
   {list[1][active[0]]}}" 
          wx:key="{
   
   {index}}" 
          wx:index="index" 
          data-index="{
   
   {index}}"
          bindtap="changeLevel2"
        >
          {
   
   {item}}
        </li>
      </ul>
    </view>
  </view>
</view>

/components/filter-panel/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 组件的方法列表
   */
  methods: {
    changeLevel() {
      this.triggerEvent('changeLevel', {
        level1: this.properties.active[0],
        level2: this.properties.active[1]
      })
    },
    changeLevel1(event) {
      const index = event.target.dataset.index
      this.setData({
        active: [index, 0]
      })
      this.changeLevel()
    },
    changeLevel2(event) {
      const level2 = 'active[1]'
      const index = event.target.dataset.index
      this.setData({
        [level2]: index
      })
      this.changeLevel()
    }
  }
})

（3）
コンポーネント内のデータは外部に転送されます。このコンポーネントでは、changeLevelメソッドを定義しました。第1レベルのメニューまたは第2レベルのメニューをクリックするたびに、this.triggerEventメソッドを使用して使用するコンポーネントの外側へのアクティブな値。

/components/filter-panel/index.js

 methods: {
      changeLevel() {
        this.triggerEvent('changeLevel', {
          level1: this.properties.active[0],
          level2: this.properties.active[1]
        })
      },
      changeLevel1(event) {
        const index = event.target.dataset.index
        this.setData({
          active: [index, 0]
        })
        this.changeLevel()
      },
      changeLevel2(event) {
        const level2 = 'active[1]'
        const index = event.target.dataset.index
        this.setData({
          [level2]: index
        })
        this.changeLevel()
      }
    }

5.まとめ
このプロジェクトでは、コンポーネント間のデータ転送を使用しないため、コンポーネントと外部の転送は比較的簡単ですが、データの状態の変化について明確に考える必要があります。

転載リンクアドレス：https://segmentfault.com/a/1190000014474289?utm_source=index-hottest