WeChat ミニ プログラム開発 - 実行の開始 (4)

1. 学習目標

今日学習したすべての知識ポイントはカスタム コンポーネントを中心に展開します。詳細については、[ガイド => カスタム コンポーネント]を参照してください。

ナレッジポイント名	知識コンテンツ	難易度	要件
コンポーネントの作成と参照	カスタム コンポーネント、ローカル参照、グローバル参照、グローバルとローカルの比較、コンポーネントとページの相違点の作成	3つ星	マスター
コンポーネントスタイル	スタイルの分離機能、分離機能に関する注意点、スタイル分離機能を変更するためのオプション	3つ星	マスター
データ、メソッド、プロパティ	データプライベートデータ、メソッドメソッド、プロパティ属性、データとプロパティの違いを定義する	3つ星	マスター
データリスナー	データリスナーの定義と構文形式、基本的な使用法、データ変更の監視、監視ケース	3つ星	学び
純粋なデータフィールド	純粋なデータ フィールドとは何ですか、使用規則、純粋なデータ フィールドの使用例	2つ星	学び
コンポーネントのライフサイクル	すべてのライフサイクル関数、主要なライフサイクル関数、ライフタイム ノード	2つ星	学び
コンポーネントが配置されているページのライフサイクル	コンセプト、pageLifetimes ノード	4つ星	学び
スロット	概念、単一ソケット、複数ソケット、複数ソケットの定義と使用	3つ星	マスター
父子通信	親子通信の3つのメソッド、属性バインディング(親子)、イベントバインディング(子-親)、コンポーネントインスタンスを取得するselectComponent(親子)	4つ星	マスター
行動	概念と定義、動作の作成、インポートと使用、使用可能なすべてのノードの理解、同名オーバーライドと組み合わせルール	4つ星	マスター

2. コンポーネントの作成と参照

2.1. コンポーネントの作成

• ①プロジェクトのルートディレクトリに右クリックしてcomponents -> testフォルダー
• ②新しく作成したcomponents -> testフォルダ右クリックし、「新規作成」をクリックします。Component
• ③ コンポーネントの名前を入力して Enter キーを押すと、コンポーネントに対応する 4 つのファイルが自動的に生成されます。接尾辞は 、.js、.jsonです.wxml。.wxss

注:明確なディレクトリ構造を確保するために、異なるコンポーネントを別のディレクトリに保存することをお勧めします。

2.2. コンポーネントの参照方法

コンポーネント参照はローカル参照とグローバル参照に分けられます

• ローカル参照:コンポーネントは現在参照されているページでのみ使用できます。
• グローバル参照:コンポーネントはすべてのアプレット ページで使用できます。

ローカル参照コンポーネント

ページの.json設定内のコンポーネントを参照する方法を部分参照といいます。

{
    
    
	// 在页面的.json 文件 usingComponents 字段导入组件
	"usingComponents":{
    
    
		"myTest":"../../components/test01/test01"
	}
}

<!--在页面中使用导入的组件-->
<myTest></myTest>

グローバル参照コンポーネント

app.jsonグローバル設定ファイル内のコンポーネントを参照する方法をグローバル参照と呼びます。

{
    
    
	"pages":[...],
    "windows":{
    
    ...},
	"tabBar":{
    
    ...},
    // 在app.json文件的usingComponents 字段导入组件
    "usingComponents":{
    
    
        "myTest02":"./components/test02/test02"
    },
    "style":"v2",
    "sitemapLocation":"sitemap.json"
}

<!--在页面中使用导入的组件-->
<myTest02></myTest02>

グローバル参照とローカル参照の違い

コンポーネントの使用頻度と範囲に応じて、適切な参照方法を選択します。

• コンポーネントが複数のページで頻繁に使用される場合は、グローバル参照を作成することをお勧めします。
• コンポーネントが特定のページでのみ使用される場合は、ローカル参照を作成することをお勧めします。

2.3、コンポーネントとページの違い

表面上、コンポーネントとページは、 、 、および の 4 つのファイルで構成さ.jsれ.jsonます。.wxml .wxssただし.js、.jsonコンポーネントとページの と ファイルの間には顕著な違いがあります。

1. 属性はコンポーネントの.jsonファイルで宣言する必要があります"component": true
2. 関数は コンポーネントのファイル.jsで呼び出されますComponent()
   • プログラム全体が呼び出しを開始しますApp()
   • ページのレンダリング呼び出しPage()
   • コンポーネントのレンダリングでは、Component()
3. コンポーネントのイベント ハンドラー関数はmethodsノード

3. コンポーネントのスタイル

考え

❓ vue のコンポーネントのスタイルの特別な点は何ですか?

vueファイル内のstyleタグにscoped属性が追加されている場合、記述されたスタイルは現在のコンポーネントにのみ適用されます。それ以外の場合は、他の外部要素と対話します。

デフォルトでは、カスタム コンポーネントのスタイルは現在のコンポーネントに対してのみ有効であり、次の図に示すように、コンポーネントの外部の UI 構造には影響しません。

• コンポーネント A のスタイルはコンポーネント C のスタイルには影響しません。
• コンポーネント A のスタイルは、アプレット ページのスタイルには影響しません。
• アプレット ページのスタイルは、コンポーネント A および C のスタイルには影響しません。

利点：

• ① 外部スタイルがコンポーネント内部のスタイルに影響を与えないようにする
• ② コンポーネントのスタイルが外界のスタイルを破壊しないようにする

3.2. コンポーネントのスタイル分離に関する注意事項

• app.wxssグローバル スタイルはコンポーネントには無効です
• セレクターのみがclassスタイル分離効果を持ちます。idセレクター、属性セレクター、およびラベル セレクターはスタイル分離の影響を受けません。

提案:コンポーネントおよびコンポーネントを参照するページではクラス セレクターを使用することをお勧めします。 、属性、ラベル セレクターは使用しないでください。id

3.3. コンポーネントスタイルの分離オプションを変更する

デフォルトでは、カスタムスタイル分離機能により、コンポーネントの内部スタイルと外部スタイルの干渉を防ぐことができます。ただし、コンポーネント内のスタイルを外部から制御できるようにしたい場合があります。このとき、コンポーネントのスタイル分離オプションstyleIsolationを変更。使用方法は次のとおりです。

// 组件的 .js 文件中新增如下配置
Component({
    
    
    options:{
    
     
        styleIsolation:'isolated'
    }
})
// 或在组件的.json文件中新增如下配置
{
    
    
    "styleIsolation":"isolated"
}

3.4、styleIsolation のオプションの値

styleIsolationのデフォルト値はisolated

オプションの値	デフォルト	説明
孤立した	はい	スタイル分離が有効であることを示します。カスタム コンポーネントの内部と外部で、クラスで指定されたスタイルを使用しても、コンポーネントの内部と外部で相互に影響を及ぼしません。
適用-共有	いいえ	ページwxssスタイルはカスタム コンポーネントに影響しますが、カスタム コンポーネントwxssで指定されたスタイルはページには影響しないことを示します
共有	いいえ	ページwxssスタイルがカスタム コンポーネントに影響し、カスタム コンポーネントで指定されたスタイルが、またはwxsssetを使用してページおよび他のカスタム コンポーネントにも影響すること、つまりコンポーネントの内部および外部の影響を与えることを示します。apply-sharedshared

カスタム コンポーネント スタイルに関するその他のコンテンツについては、「ガイド => カスタム コンポーネント => コンポーネント テンプレートとスタイル」を参照してください。

4. コンポーネントのデータ、メソッド、プロパティ

4.1. データのプライベートデータの定義

アプレット コンポーネントでは、コンポーネント テンプレートのレンダリングに使用されるプライベート データをdataノード

// 组件的JS文件中

Component({
    
    
    // 组件的初始数据
    data:{
    
    
        name:'张三'
    }
})

4.2. メソッドメソッドの定義

アプレット コンポーネントでは、イベント ハンドラーとカスタム メソッドをmethodsノード

// 组件的JS文件中

Component({
    
    
    // 组件的方法列表
    methods:{
    
    
        btnFn(){
    
    
            this.setData({
    
    
                name:'李四'
            })
        }
    }
})

4.3. プロパティ属性の定義

アプレット コンポーネントでは、propertiesコンポーネントの外部属性であり、外部 (親コンポーネント) からコンポーネントに渡されるデータを受け取るために使用されます。

// 组件的JS文件中

Component({
    
    
    // 组件的属性列表
    properties:{
    
    
        // 完整定义属性的方式，当需要指定属性默认值时，建议使用此方法
        myId:{
    
    
            type:Number, //  数据类型
            value:10  // 默认值
        }，
        // 简化定义属性的方法，不需要指定属性默认值时，可以使用简化方式
        myAge:Number
    }
})

4.4 データとプロパティの違い

アプレットのコンポーネントでは、properties属性とdataデータの使用法は同じであり、両方とも読み取り可能および書き込み可能ですが、

• dataコンポーネントのプライベートデータを保存する傾向が強い
• properties外部からコンポーネントに渡されるデータを保存する傾向が強い
• properties属性は読み取りおよび書き込み可能ですが、データを変更することはお勧めできませんproperties。propertiesの、子コンポーネントを通じて親コンポーネントと通信することをお勧めします。

4.5. setData を使用してプロパティの値を変更する

dataデータとプロパティには本質的に違いがないためproperties、propertiesプロパティページのレンダリングに使用したり、プロパティを再割り当てしたりするためにsetData使用することもできます。properties

// 组件的JS文件中

Component({
    
    
    // 组件的属性列表
    properties:{
    
    
        myAge:Number
    },
    methods:{
    
    
        // 更新properties属性的值
        changeAge(){
    
    
            this.setData({
    
    
                myAge:this.properties.myAge+1
            })
        }
    }
})

5. データリスナー

5.1. 基本的な紹介

データ リスナーは、属性やデータ フィールドの変更を監視して応答するために使用され、それによって特定の操作が実行されます。これは、vue の監視リスナーのように機能します。

5.2. 基本的な文法

// 组件的JS中

Component({
    
    
    // 数据监听器
    observers:{
    
    
        '字段X':function(字段X新值){
    
      // 监听单个
            // 逻辑功能处理
        },
        '字段A,字段B':function(字段A新值，字段B新值){
    
     // 监听多个
            // 逻辑功能处理
        },
        '对象.属性':function(属性新值){
    
      // 监听对象某个属性变化
            // 逻辑功能处理
        },
        '对象.**':function(属性新值){
    
      // 监听对象所有属性变化
            // 逻辑功能处理
        },
        '**': function() {
    
      //每次 setData 都触发
           // 逻辑功能处理
        },
    }
})

5.3、リスナーの基本的な使い方

• コンポーネントの構造

  <!--组件wxml中-->
  <view>
  	{
       
       {num1}}  + {
       
       { num2 }} = {
       
       { sum }}
  </view>
  <button type="warn" bindtap="addNum1">Num + 1</button>
  <button type="warn" bindtap="addNum2">Num + 2</button>
  

• 追加イベントをリッスンする

  // 组件的JS中
  
  Component({
        
        
      // 组件初始数据
      data:{
        
        
          num1:0,
          num2:0,
          sum:0
      },
      // 组件方法列表
      methods:{
        
        
          addNum1(){
        
        
              this.setData({
        
        
                  num1:this.data.num1+1
              })
          },
          addNum2(){
        
        
              this.setData({
        
        
                  num2:this.data.num2+1
              })
          }
      }
  })
  

• num1 と num2 の値が変化するかどうかを監視し、変化した場合は sum を再割り当てします

  // 组件的JS中
  
  Component({
        
        
  	...,
      // 数据侦听器
      observers:{
        
        
      	'num1,num2':function(newNum1,newNum2){
        
        
      		this.setData({
        
        
                  sum:newNum1+newNum2
              })
  		}
  	}
  })
  

5.4. オブジェクトプロパティの変更を監視する

データ リスナーは、オブジェクト内の 1 つまたは複数のプロパティの変更の監視をサポートします

// 组件JS中
Component({
    
    
    // 组件的初始数据
    data:{
    
    
        obj:{
    
    
            name:'tome'
        }
    },
    // 数据侦听器
    observers:{
    
    
        // 监听obj里面的name字段变化
        'obj.name':function(newName){
    
    
            console.log(newName)
        }
    },
    // 方法列表
    methods:{
    
    
        changeObj(){
    
    
            this.setData({
    
    
                'obj.name':'jerry'  // 修改obj里面的name字段
            })
        }
    }
})

5.5. ケースデモンストレーション

結果を示す

コード

• ①コンポーネントデータを設定する

// 组件JS中

Component({
    
    
    // 组件初始数据
    data:{
    
        
        rgb:{
    
      // rgb 的颜色值对象
            r:0,
            g:0,
            b:0
        },
        fullColor:'0,0,0'  // 根据rgb对象的三个属性，动态计算fullColor的值
    }
})

• ② UI構造のレンダリング

// wxml 结构
<view style="background-color:rgb({ 
        { 
        fullColor}});" class="colorBox">颜色值：{
   
   {fullColor}}</view>
<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>

/* wxss 样式 */
.colorBox{
    
    
    line-height:200rpx;
    font-size:24rpx;
    color:white;
    text-shadow:0rpx 0rpx 2rpx black;
    text-align:center;
}

• ③ボタンのイベントハンドラ関数を定義する

// 组件JS中
Component({
    
    
    data:{
    
    ...},
    methods:{
    
    
    	changeR(){
    
      // 修改 rgb 对象上 r 属性的值
    		this.setData({
    
    
                'rgb.r':this.data.rgb.r +5 > 255 ? 255 : this.data.rgb.r+5
            })
		},
        changeG(){
    
      // 修改 rgb 对象上 g 属性的值
    		this.setData({
    
    
                'rgb.g':this.data.rgb.g +5 > 255 ? 255 : this.data.rgb.g+5
            })
		},
        changeB(){
    
      // 修改 rgb 对象上 b 属性的值
    		this.setData({
    
    
                'rgb.b':this.data.rgb.b +5 > 255 ? 255 : this.data.rgb.b+5
            })
		}
	}
})

• ④オブジェクト内の指定した属性の変化を監視する

// 组件JS中
Component({
    
    
    data:{
    
    ...},
    methods:{
    
    ...},
    observers:{
    
    
    	// 监听 rgb 对象上 r,g,b 三个子属性的变化
    	'rgb.r,rgb.g,rgb.b':function(r,g,b){
    
    
    		this.setData({
    
    
                // 为data中的fullColor 重新赋值
                fullColor:`${
      
      r},${
      
      g},${
      
      b}`
            })
    	}
    }
})

• ⑤ オブジェクト内のすべてのプロパティの変化を監視する

  オブジェクト内で監視する必要があるプロパティが多すぎる場合は、便宜上、ワイルドカード文字オブジェクト内のすべてのプロパティの変更を監視できるため、上記のコードは次のように評価できます。

// 组件JS中
Component({
    
    
    data:{
    
    ...},
    methods:{
    
    ...},
    observers:{
    
    
        // 监听 rgb 里面所有属性的变化
        'rgb.**':function(obj){
    
    
            this.setData({
    
    
                // 为data中的fullColor 重新赋值
                fullColor:`${
      
      obj.r},${
      
      obj.g},${
      
      obj.b}`
            })
        }
    }
})

6. 純粋なデータフィールド

6.1. 概念の定義

• 概念:純粋なデータ フィールドとは、インターフェイスのレンダリングに使用されないフィールドを指します。data
• アプリケーション シナリオ: たとえば、場合によっては、データ内の一部のフィールドはインターフェイスに表示されず、他のコンポーネントにも渡されず、現在のコンポーネント内でのみ使用されます。この機能を持つフィールドはdata、純粋なデータ フィールドとして設定するのに適しています。
• 利点: 純粋なデータ フィールドは、ページ更新のパフォーマンスの向上に役立ちます。

6.2. 使用規則

ComponentコンストラクタのoptionsノードではpureDataPattern正規表現で指定しており、この正規表現と一致するフィールド名を持つフィールドが純粋なデータフィールドになります。

// 组件的JS中

Component({
    
    
  options:{
    
    
    // 指定所有_开头的数据字段为纯数据字段
    pureDataPattern:/^_/
  },
  data:{
    
    
    a:true,   // 普通数据字段
    _b:true  // 纯数据字段
  }
})

6.3. ユースケース

純粋なデータフィールドを使用してデータリスナーケースを改造する

// 组件JS中

Component({
    
    
  options:{
    
    
    // 指定所有_开头的数据字段为纯数据字段
    pureDatePattern:/^_/
  },
  data:{
    
    
    // 将rgb改造为以_开头的纯数据字段
    _rgb:{
    
    
      r:0,
      g:0,
      b:0
    },
    fullColor:'0,0,0'
  },
  methods:{
    
    
    changeR(){
    
      // 修改 _rgb 对象上 r 属性的值
      this.setData({
    
    
          '_rgb.r':this.data._rgb.r +5 > 255 ? 255 : this.data._rgb.r+5
      })
	},
    changeG(){
    
      // 修改 _rgb 对象上 g 属性的值
      this.setData({
    
    
          '_rgb.g':this.data._rgb.g +5 > 255 ? 255 : this.data._rgb.g+5
      })
	},
    changeB(){
    
      // 修改 _rgb 对象上 b 属性的值
      this.setData({
    
    
          '_rgb.b':this.data._rgb.b +5 > 255 ? 255 : this.data._rgb.b+5
      })
	}
  },
  observers:{
    
    
    // 监听 rgb 对象上 r,g,b 三个子属性的变化
    '_rgb.**':function(obj){
    
    
        this.setData({
    
    
            // 为data中的fullColor 重新赋值
            fullColor:`${
      
      obj.r},${
      
      obj.g},${
      
      obj.b}`
        })
    }
  }
})

7. ライフサイクル

7.1. すべてのライフサイクル機能

ライフサイクル	パラメータ	説明
作成した	なし	コンポーネント インスタンスが作成されたばかりで、作成されたばかりの後にアプレット ページに配置されていないときに実行されます。
添付	なし	コンポーネント インスタンスがページ ノード ツリーに入るときに実行されます。コンポーネント インスタンスはアプレット ページに配置されたばかりで、まだレンダリングされていません。
準備	なし	ビューレイヤーのコンポーネントのレイアウトが完了し、この時点でレンダリングが完了した後に実行されます。
移動しました	なし	コンポーネント インスタンスがノード ツリー内の別の場所に移動されるときに実行され、コンポーネントが移動されるときにトリガーされます。
切り離された	なし	コンポーネント インスタンスがページ ノード ツリーから削除されるときに実行され、コンポーネントが破棄されるときにトリガーされます。
エラー	オブジェクトエラー	コンポーネントメソッドがエラーをスローするたびに実行されます

7.2. 主なライフサイクル機能

コンポーネントのライフ サイクルは、コンポーネント自体のいくつかの機能を指します。これらの機能は、特別な時点または特別なフレームワーク イベントが発生したときに自動的にトリガーされます。最も重要なライフ サイクルは 、 、 であり、これには最も重要なライフ サイクルが含まれますcreatedコンポーネントインスタンスattachedのdetachedメイン時点のサイクル。

①コンポーネントインスタンスが作成されると、作成されたライフサイクルがトリガーされます

• 現時点では電話できませんsetData
• 通常、このライフサイクルは、コンポーネントにいくつかのカスタム プロパティ フィールドを追加するためにのみ使用します。

② コンポーネントが完全に初期化され、ページ ノード ツリーに入ると、アタッチされたライフ サイクルがトリガーされます。

• this.data が初期化されました
• このライフサイクルは非常に便利で、ほとんどの初期化作業をこの時点で実行できます。

③コンポーネントがページノードツリーから離れた後、切り離されたライフサイクルがトリガーされます。

• ページを終了すると、ページ内の各カスタム コンポーネントの切り離されたライフ サイクルがトリガーされます。
• 掃除をするのに良い時期です

7.3、ライフタイムノード

ライフ サイクル メソッドは、コンポーネント コンストラクターの第 1 レベルのパラメーターで直接定義できます。コンポーネントのライフ サイクルlifetimesはフィールドで宣言することもできます (これは推奨される方法であり、優先度が最も高くなります)。

// 组件JS里面

Component({
    
    
    // 在lifetimes 字段中声明钩子函数
    lifetimes:{
    
    
        attached(){
    
    
            console.log('在组件实例进入页面节点树')
        },
        detached(){
    
    
            console.log('在组件实例被从页面节点树移除')
        }
    },
    // 老写法
     attached(){
    
    
         console.log('~~~~在组件实例进入页面节点树')
     },
    detached(){
    
    
        console.log('~~~~在组件实例被从页面节点树移除')
    }
})

7.4、コンポーネントが配置されているページのライフサイクル

コンポーネントが配置されているページのライフサイクルは何ですか

カスタム コンポーネントの動作は、ページの状態の変化に依存します。このとき、コンポーネントが配置されているページのライフ サイクルを使用する必要があります。カスタム コンポーネントでは、コンポーネントが配置されているページのライフ サイクル機能が使用されます。は次のとおりです。

ライフサイクル	パラメータ	説明
見せる	なし	コンポーネントが配置されているページが表示されたときに実行されます
隠れる	なし	コンポーネントが配置されているページが非表示のときに実行されます。
サイズ変更	オブジェクトのサイズ	コンポーネントが配置されているページのサイズが変更されたときに実行されます。

ページライフタイムノード

コンポーネントが配置されているページのライフサイクル関数をpageLifetimesノード

// 组件JS里面

Component({
    
    
	// 在组件内部的pageLifetimes 节点中，监听组件在页面的生命周期函数
	pageLifetimes:{
    
    
		show(){
    
    },  // 在页面被展示的时候，调用该方法
		hide(){
    
    },  // 页面被隐藏
		resize(){
    
    } // 页面尺寸变化
	}
})

8. スロット

8.1. スロットとは

カスタム コンポーネントの構造では、コンポーネントのユーザーが提供する構造をwxmlホストするノード (スロット) を提供できます。wxml

端的に言えば、スロットとは、子コンポーネントが穴を掘り、親コンポーネントがその穴を埋める処理です。親コンポーネントが子コンポーネントを使用する場合、子コンポーネント内のいくつかのレイアウトが決定されます。

• サブコンポーネントが掘り下げられます
• 親コンポーネントは、コンポーネント タグの中央のコンテンツで穴を埋めます。

8.2. シングルスロット

アプレットでは、デフォルトで各カスタム コンポーネントで 1 つのスロットのみが許可されます。この数の制限はシングル スロットと呼ばれます。

• デフォルトでは、コンポーネントwxmlの 1 つだけがslot
• ** 使用多 slot** が必要な場合は、コンポーネントjs内で
• 注: 現在、アプレットにはデフォルト スロットと複数のスロットのみがあり、スコープ付きスロットは現在サポートされていません。

<!--组件的wxml-->
<view class="wrapper">
	<view>这里是组件的内部节点</view>
    <!--对于不确定的内容，可以使用<slot> 进行占位，具体的内容由组件的使用者决定-->
    <slot></slot>
</view>

<!--组件使用者的wxml-->
<component-tag-name>
    <!--这部分内容将被放置在组件<slot>的位置上-->
    <view>这里是插入到组件 slot 中的内容</view>
</component-tag-name>

8.3、複数のスロット

デフォルトでは、コンポーネントwxml内に存在できるコンポーネントは 1 つだけですslot。複数のコンポーネントが必要な場合は、構成を有効にする必要があります。

マルチソケットを有効にする

アプレットのカスタム コンポーネントでマルチソケットを使用する必要がある場合は、コンポーネント ファイルで設定して有効にすることができます。.js

// 组件JS中

Component({
    
    
    options:{
    
    
        multipleSlots:true // 在组件定义时的选项中启用多slot支持
    },
    properties:{
    
    ...},
    methods:{
    
    ...}
})

マルチソケットを使用する

コンポーネント内で.wxml複数のタグを使用して、異なるスロットを区別することができます。name

<!--组件的wxml-->
<view class="wrapper">
    <!-- name为before的slot插槽 -->
    <slot name="before"></slot>
	<view>这里是组件的内部节点</view>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- name为after的slot插槽 -->
    <slot name="after"></slot>
</view>

<!--组件使用者的wxml-->
<component-tag-name>
    <!--渲染到name为before的slot标签位置-->
    <view slot="before">我是内容AAA</view>
    <!-- 默认插槽内容-->
    <view>这里是插入到组件 slot 中的内容</view>
    <!--渲染到name为after的slot标签位置-->
    <view slot="after">我是内容CCC</view>
</component-tag-name>

9、父子通信

9.1. 親子コミュニケーションの主な方法

親コンポーネントと子コンポーネント間で通信する 3 つの方法

① 属性バインディング（親と子）

親コンポーネントから子コンポーネントの指定されたプロパティにデータを設定するために使用されます。JSON互換のデータのみを設定できます(データのみを渡すことができ、メソッドは渡せません)

②イベント縛り（親子）

子コンポーネントが親コンポーネントにデータを渡すために使用され、任意のデータ (配列やメソッドを含む) を渡すことができます。

③コンポーネントインスタンス（親と子）を取得する

親コンポーネントは、子コンポーネントのインスタンス オブジェクトthis.selectComponent()を取得する

9.2. 属性バインディング (親と子)

データを渡す

• 属性バインディングは親から子に値を渡すために使用され、一般的なタイプのデータのみを渡すことができ、子コンポーネントにメソッドを渡すことはできません

// 父的JS
data:{
    
    
    count:1  // 父组件中的数据
}

<!--父的wxml-->
<view>
	<myTest02 count="{
     
     {count}}"></myTest02>
    <view>父组件传递的数据为：{
   
   {count}}</view>
</view>

データを受信する

• サブコンポーネントはpropertiesノード、使用します。

// 子组件的JS
Component({
    
    
    // 组件的属性列表
    properties:{
    
    
        count:{
    
    
            type:Number,
            value:0
        }
    }
})

<!--子组件的wxml-->
<view>{
   
   {count}}</view>

9.3、イベントバインディング（子親）

実装手順

イベント バインディングは、子から親に値を渡すために使用され、あらゆる種類のデータを渡すことができます。使用する手順は次のとおりです。

① 親コンポーネントjsで、カスタムイベントの形式で子コンポーネントに渡される関数を定義します。

② 親コンポーネントwxmlで、手順1で定義した関数参照をカスタムイベントの形で子コンポーネントに渡します。

③子js、を呼び出してthis.triggerEvent('自定义事件名称', {/\* 参数对象 \*/})親コンポーネントにデータを送信します。

④ 親コンポーネントjsでは、 e.detail***を通じて子コンポーネントから渡されたデータを取得します。

コード

ステップ 1: 親コンポーネントjsで、カスタム イベントの形式で子コンポーネントに渡される関数を定義します。

// 父组件JS
Page({
    
    
	// 定义回调函数
	changeCount(e){
    
    
		console.log('触发')
	}
})

ステップ 2: 親コンポーネントwxmlで、ステップ 1 で定義した関数参照をカスタム イベントの形式で子コンポーネントに渡します。

<!--父的wxml-->
<!--使用bind:自定义事件名(推荐：结构清晰)-->
<myTest02 count="{
     
     { count }}" bind:event="changeCount"></myTest02>
<!--或在bind 后面直接写上自定义名称-->
<myTest02 count="{
     
     { count }}" bindevent="changeCount"></myTest02>

ステップ 3: 子コンポーネントjsで、 を呼び出してthis.triggerEvent('自定义事件名称', {/* 参数对象 */})データを親コンポーネントに送信します。

<!--子的wxml-->
<view>
	<button bindtap="setData">传值给父组件</button>
</view>

// 子的JS
Component({
    
    
    // 组件初始数据
    data:{
    
    
        age:10
    },
    // 组件方法列表
    methods:{
    
    
        setDate(){
    
    
              this.triggerEvent('event',{
    
    age:this.data.age})
        }
    }
})

ステップ 4: 親コンポーネントでjs、e.detail子コンポーネントによって渡されたデータを取得します。

// 父组件JS
Page({
    
    
	// 定义回调函数
	changeCount(e){
    
    
		// 获取子组件传递过来的数据
		console.log(e.detail.age)
	}
})

9.4、selectComponent (親と子)

親コンポーネント内で呼び出してthis.selectComponent("id或class选择器")子コンポーネントのインスタンス オブジェクトを取得し、子コンポーネントのデータやメソッドに直接アクセスできます。呼び出し時にセレクターを渡す必要があります。たとえば、this.selectComponent(".my-component")

このメソッドの考え方は、vueでの参照関連付けを通じてコン​​ポーネントのインスタンスを見つけるという考え方とほぼ同じです。

<!--父的wxml-->
<view>
    <!--使用bind:自定义事件名(推荐：结构清晰)-->
    <myTest02 count="{
     
     { count }}" id="box" class="box" bind:event="changeCount"></myTest02>
    <button bindtap="getSonObj">获取子组件实例</button>
</view>

// 父的JS
Page({
    
    
    getSonObj(){
    
    
        // 切记： 选择器的参数不能传递标签选择器，不然返回的是null
        // const child = this.selectComponent('.box') 
        const child = this.selectComponent('#box') 
        console.log(child)
    }
})

まとめ

❓ アプレット内のコンポーネントに値を渡す方法はいくつかありますが、それは何ですか?

• 親から子へ値を渡す: プロパティ バインディング
• 子から親への値の受け渡し: イベントバインディング
• コンポーネントインスタンスの取得selectComponent

10、行動

10.1. 基本的な紹介

行動とは何ですか

behaviorsこれは、Vue.js の機能と同様に、小規模なプログラム内のコンポーネント間のコード共有を実装するために使用される機能です。"mixins"

行動の仕組み

それぞれに、プロパティ、データ、ライフサイクル、メソッドのセットbehaviorを含めることができます。コンポーネントがコンポーネントを参照すると、そのプロパティ、データ、メソッドがコンポーネントにマージされます。

behavior各コンポーネントは、複数のコンポーネントまたはbehavior他のコンポーネントを参照できますbehavior。

10.2. 作成と使用

行動を作成する

Behavior(Object object)メソッドbehaviorを呼び出して、すべてのコンポーネントが使用する共有インスタンス オブジェクトを作成します。

// 调用 Behavior() 方法，创建实例对象
// 并使用module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
    
    
    // 属性节点
    properties:{
    
    },
    // 私有数据节点
    data:{
    
     username:'德玛西亚' },
    // 事件处理函数和自定义方法节点
    methods:{
    
    },
    // 其他节点...
})

動作を使用してインポートする

// 1. 使用require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behavior')

Component({
    
    
    // 2. 将导入的behavior实例对象，挂载到behaviors 数组节点中，即可生效
    behaviors:[myBehavior],
    // 组件其他节点
})

10.3、動作はノードを使用できます

利用可能なノード	タイプ	必要ですか?	説明
プロパティ	オブジェクトマップ	いいえ	同じコンポーネントのプロパティ
データ	物体	いいえ	同じコンポーネントからのデータ
メソッド	物体	いいえ	カスタムコンポーネントと同じ方法
行動	文字列配列	いいえ	他を紹介するbehavior
作成した	関数	いいえ	ライフサイクル機能
添付	関数	いいえ	ライフサイクル機能
準備	関数	いいえ	ライフサイクル機能
移動しました	関数	いいえ	ライフサイクル機能
切り離された	関数	いいえ	ライフサイクル機能

10.4. 同名の適用範囲と組み合わせルール

コンポーネントとその参照にbehaviorは、同じ名前のフィールドが含まれる場合がありますが、この場合、次の 3 つの同じ名前の処理ルールを参照できます。

• ①同名のデータフィールド（data）
• ②同名のプロパティ（properties）またはメソッド（methods）
• ③同名のライフサイクル関数

特定のルールについては、以下を参照してください。

カスタム コンポーネント スタイルに関するその他のコンテンツについては、「ガイド=>カスタム コンポーネント=>動作」を参照してください。