1. コンポーネントのライフサイクル
1.1 コンポーネントのすべてのライフサイクル機能
アプレット コンポーネントで使用できるすべてのライフ サイクルを次の表に示します。
| ライフサイクル機能 | パラメータ | 説明 |
|---|---|---|
| 作成した | なし | コンポーネント インスタンスが作成された直後に実行される |
| 添付 | なし | コンポーネント インスタンスがページ ノード ツリーに入ったときに実行されます。 |
| 準備 | なし | コンポーネントがビューレイヤーに配置された後に実行されます |
| 移動した | なし | コンポーネント インスタンスがノード ツリー内の別の場所に移動したときに実行されます。 |
| 切り離された | なし | ページ ノード ツリーからコンポーネント インスタンスが削除されたときに実行されます。 |
| エラーオブジェクト | エラー | コンポーネントメソッドがエラーをスローするたびに実行されます |
1.2 コンポーネントの主なライフサイクル機能
アプレット コンポーネントには、作成、アタッチ、デタッチという 3 つの最も重要なライフサイクル機能があります。それぞれの特徴は次のとおりです。
-
コンポーネント インスタンスが作成されると、作成されたライフサイクル関数がトリガーされます。この時点では、setData を呼び出すことはできません。通常、このライフサイクル関数では、カスタム属性フィールドをコンポーネントの this に追加するためにのみ使用する必要があります。
-
コンポーネントが完全に初期化されてページ ノード ツリーに入ると、添付されたライフサイクル関数がトリガーされます. この時点で、this.data は初期化されています. このライフサイクルは非常に便利であり、初期化作業のほとんどはこの時点で実行できます. (初期データ取得リクエストの送信など)
-
コンポーネントがページ ノード ツリーを離れた後、切り離されたライフサイクル関数がトリガーされます. ページを終了すると、ページ内の各カスタム コンポーネントの切り離されたライフサイクル関数がトリガーされます. このとき、いくつかのクリーニング作業を行うのが適しています.
/**
* 组件的初始数据
*/
data: {
_rgb:{
// rgb 的颜色值对象
r:0,
g:0,
b:
},
fullColor: '0, 0, 0' //根据rgb对象的三个属性，动态计算fullColor 的值
},
})
ライフサイクル関数のパラメータ 説明
show コンポーネントのないページが表示されたときに実行されます
hide コンポーネントのないページが非表示になったときに実行されます
resize Object Size コンポーネントが配置されているページのサイズが変更されたときに実行されます
1.3 ライフタイム ノード
アプレット コンポーネントでは、ライフサイクル関数を Component コンストラクターの第 1 レベルのパラメーターで直接定義し、lifetimes フィールドで宣言できます (これが推奨される方法であり、優先度が最も高くなります)。サンプルコードは次のとおりです。
2. コンポーネントが配置されているページのライフサイクル
2.1 コンポーネントが配置されているページのライフサイクルとは
カスタムコンポーネントの動作は、ページの状態の変化に依存することがあります. このとき、コンポーネントが配置されているページのライフサイクルを使用する必要があります. 例: ページの show lifecycle 関数がトリガーされるたびに、ランダムな RGB カラー値を再生成できるようにしたいと考えています。カスタム コンポーネントには、コンポーネントが配置されているページのライフサイクル機能が 3 つあります。
// components/test3/test3.js
Component({
//旧式的定义方式
created() {
console.log('created'); //在组建实例进入页面节点树时执行
},
attached(){
console.log('attached'); //在组件实例被从页面节点树移除时执行
},
// 推荐用法
lifetimes:{
created() {
console.log('created~'); //在组建实例进入页面节点树时执行
},
attached(){
console.log('attached~');//在组件实例被从页面节点树移除时执行
},
}
})
2.2 pageLifetimes ノード
コンポーネントが配置されているページのライフサイクル関数は、pageLifetimes ノードで定義する必要があります。サンプル コードは次のとおりです。
2.3 ランダムな RGB カラー値を生成する
// components/test3/test3.js
Component({
pageLifetimes:{
show(){
console.log('show');
},
hide(){
console.log('hide');
},
resize(){
console.log('resize');
}
}
})
// components/test3/test3.js
Component({
/**
* 组件的方法列表
*/
methods: {
changeR(){
//修改 rgb 对象上 r属性的值
this.setData({
'_rgb.r':this.data._rgb.r + 5 > 255? 255 : this.data._rgb.r
+ 5
3.スロット
3.1 スロットとは
カスタム コンポーネントの wxml 構造では、ノード (スロット) を提供して、コンポーネント ユーザーによって提供された wxml 構造を運ぶことができます。
changeG(){
// 修改rgb对象上r属性的值
this.setData({
'_rgb.g':this.data._rgb.g + 5 >255 ?255 :this.data._rgb.g +
})
},
changeB(){
//修改 rgb对象上b属性的值
this.setData({
'_rgb.b':this.data._rgb.b + 5 > 255? 255 :this.data._rgb.b
+
})
},
_randomColor() {
this.setData({
_rgb:{
r: Math.floor(Math.random() * 256),
g: Math.floor(Math.random() * 256),
b: Math.floor(Math.random() * 256)
}
})
}
},
pageLifetimes:{
show(){
console.log('show');
this._randomColor()
}
}
})
3.2 シングルスロット
アプレットでは、デフォルトで各カスタム コンポーネントに許可されるプレースホルダーは 1 つだけであり、この数の制限は単一スロットと呼ばれます。
コンポーネントに新しい test4 フォルダーを作成する ファイルに新しいコンポーネントを作成する
コンポーネント ディレクトリを app.json usingComponents に追加します。
"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
"my-test3":"/components/test3/test3",
"my-test4":"/components/test4/test4"
},
component.wxml で構造を定義する
<!--components/test4/test4.wxml-->
<view>
<view>
这里是组件的内部结构
</view>
<slot></slot>
</view>
ページの .wxml で構造を定義します。
<!--pages/home/home.wxml-->
<my-test4>
<view>
这是通过插槽填充的内容
</view></my-test4>
3.3 複数のスロットを定義する
コンポーネントの .wxml で複数のタグを使用して、異なる名前の異なるスロットを区別できます。スロット タグを component.wxml に追加して、各スロット タグの name 属性値を定義します。
// components/test4/test4.js
Component({
options: {
multipleSlots: true //在组件定义时选型中启用多slot支持
},
properties: {
/* ... */},
data: {
/* ... */},
methods: {
/* ... */ }
})
<!--components/test4/test4.wxml-->
<view>
<slot name="before"></slot>
<view> 这里是组件的内部结构 </view>
<slot name="after"></slot>
</view>
4. 親コンポーネントと子コンポーネント間の通信
4.1 親コンポーネントと子コンポーネント間の通信の 3 つの方法
1.属性バインディング
親コンポーネントから子コンポーネントの指定されたプロパティにデータを設定するために使用され、JSON 互換のデータのみを設定できます
2. イベントバインディング
子コンポーネントが親コンポーネントにデータを渡すために使用され、任意のデータを渡すことができます
3. コンポーネント インスタンスを取得する
親コンポーネントは、 this.selectComponent() を介して子コンポーネント インスタンス オブジェクトを取得することもでき、子コンポーネントの任意のデータとメソッドに直接アクセスできます。
4.2 プロパティバインディング
属性バインディングは親から子への値の受け渡しに使用され、一般的なタイプのデータのみを渡すことができ、メソッドは子コンポーネントに渡すことができません
.home.jsでデータを定義します.
<my-test4>
<!-- 这部分内容将被放置在组件 <slot name="after">的位置上 -->
<view slot="after">这是通过插槽填充的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="before">的位置上 -->
<view slot="before">~~~~~~~</view>
</my-test4>
// 父组件的data节点
data: {
count:0
}
home.js で構造を定義する
コンポーネントに新しい test5 フォルダーを作成する ファイルに新しいコンポーネントを作成する
コンポーネント ディレクトリを app.json usingComponents に追加します。
ホームページでこのコンポーネントを使用する
サブコンポーネントは、プロパティ ノードで対応するプロパティを宣言し、サブコンポーネント ボタンの自己インクリメントの効果を使用します。
// 父组件的.wxml结构
<my-test3 count="{
{count}}"> </my-test3>
<view>-----</view>
<view>父组件中,count值为：{
{count}}</view>
"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
"my-test3":"/components/test3/test3",
"my-test4":"/components/test4/test4",
"my-test5":"/components/test5/test5"
},
<my-test5 count="{
{count}}"></my-test5>
<view>~~~~~~~~~~~</view>
<view>父组件中，count值是：{
{count}}</view>
// components/test5/test5.js
Component({
/**
* 组件的属性列表
*/
properties: {
count:Number
4.3 イベントバインディング
子から親への値の受け渡しにはイベント バインディングが使用され、任意の型のデータを渡すことができます。使用する手順は次のとおりです。
ステップ 1 : 親コンポーネントの js で、カスタム イベントの形式で子コンポーネントに渡される関数を定義します。
-
親コンポーネントの js で、カスタム イベントの形式で子コンポーネントに渡される関数を定義します。
-
親コンポーネントの wxml で、手順 1 で定義した関数参照をカスタム イベントの形式で子コンポーネントに渡します。
-
子コンポーネントの js で、 this.triggerEvent ('カスタム イベント名', { /* パラメータ オブジェクト */ }) を呼び出して、親コンポーネントにデータを送信します。
-
親コンポーネントのjsでは、子コンポーネントから渡されたデータをe.detailで取得しています。
ステップ 2 : 親コンポーネント (home.wxml) の wxml で、ステップ 1 で定義した関数をカスタム イベントの形式で参照し、
子コンポーネントに渡されます。
バインドを使用: カスタム イベント名 (推奨: 明確な構造)
または、バインドの直後にカスタム イベント名を記述します。
ステップ 3 : サブコンポーネントの js で、 this.triggerEvent('custom event name', { /* parameter object */ }) を呼び出して、サブコンポーネント (test5.wxml) の .wxml 構造にデータを送信します。
子コンポーネントの js コード
//在父组件中定义sysncCount方法
// 将来，这个方法会被传递给子组件，供子组件进行调用
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
sysncCount(){
console.log('sysncCount');
},
<my-test5 count="{
{count}}" bind:sync="sysncCount"></my-test5>
<view>子组件中，count值是：{
{count}}</view>
<button type="primary" bindtap="addCount">+1</button>
// components/test5/test5.js
Component({
methods: {
addCount(){
this.setData({
count:this.properties.count + 1
})
// 触发自定义事件，将数值同步给父组件
this.triggerEvent('sync',{
value:this.properties.count})
}
}
})
親コンポーネントのjsでは、子コンポーネントから渡されたデータをe.detailで取得しています。
4.4 コンポーネントインスタンスの取得
親コンポーネントで this.selectComponent("id or class selector") を呼び出して、子コンポーネントのインスタンス オブジェクトを取得し、子コンポーネントのデータとメソッドに直接アクセスできます。this.selectComponent(“.my-component”) のように、呼び出し時にセレクターを渡す必要があります。
home.wxml は構造を定義します
sysncCount(e){
// console.log('sysncCount');
// console.log(e);
// console.log(e.detail.value);
this.setData({
count: e.detail.value
})
},
<my-test5 count="{
{count}}" bind:sync="sysncCount" class="customA" id='cA'>
</my-test5>
<view>~~~~~~~~~~~</view>
<view>父组件中，count值是：{
{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
sysncCount(e){
// console.log('sysncCount');
// console.log(e);
// console.log(e.detail.value);
this.setData({
count: e.detail.value
})
},
getChild(){
//切记不能传递标签选择器否自返回的是null
const child = this.selectComponent('.customA')
// console.log(child);
// 调用子组件的 setData方法
// child.setData({
// count:child.properties.count +1 //注意此处只能用child不能用this
// })
child.addCount()//调用子组件的addCount方法
},
})