記事ディレクトリ
コンポーネント化された開発と使用
コンポーネント通信利用の流れ
多くの場合、コンポーネントに表示されるコンテンツ (データ、スタイル、ラベル) はコンポーネントにハードコーディングされておらず、ユーザーが決定できます。
コンポーネントにデータを渡します:
ほとんどの場合、コンポーネントはレイアウトとスタイリングのみを担当し、コンテンツはコンポーネントを使用するオブジェクトによって決定されます。
したがって、多くの場合、外部からコンポーネントにデータを渡し、コンポーネントを表示させる必要があります。
渡す方法は？
プロパティ プロパティを使用します。
サポートされているタイプ:
文字列、数値、ブール値
オブジェクト、配列、null (無制限の型を表す)
デフォルト値:
デフォルト値は値で設定できます。
サンプルコード
<!-- 向组件传递参数 -->
<section-info title="我是标题" content="我是内容: 哈哈哈哈" />
Component({
// 在组件中接收数据
properties: {
title: {
type: String,
value: "我是默认标题"
},
content: {
type: String,
value: "我是默认的内容"
}
}
})
コンポーネントにスタイルを渡す:
コンポーネントにスタイルを渡す:
コンポーネント内のスタイルを修正したくない場合もありますが、外部がコンポーネント内のスタイルを決定できます。
今回は、externalClassesプロパティを使用できます。
1. Component オブジェクトで、導入するクラスを externalClasses プロパティで定義する
Component({
// 在组件中接收样式
externalClasses: ["info"]
})
2. コンポーネント内の wxml の externalClasses 属性でクラスを使用する
<view class="section">
<view class="title">{
{ title }}</view>
<!-- 使用info类 -->
<view class="content info">{
{ content }}</view>
</view>
3. ページ内の対応するクラスを渡し、このクラスのスタイルを設定します
<!-- 向组件传入class: info -->
<section-info info="info" />
.info {
font-weight: 700;
}
コンポーネントがイベントを渡す - カスタム イベント
カスタム コンポーネント内でイベントが発生し、コンポーネントのユーザーに通知する必要がある場合があります (つまり、コンポーネント内のイベントは外部から監視されます)。このとき、カスタム イベントを使用できます。
まず、コンポーネント内のタイトルをリッスンするなど、コンポーネント内のクリックをリッスンします。
<view class="section">
<!-- 组件内部监听title -->
<view class="title" bindtap="onTitleTap">{
{ title }}</view>
<view class="content">{
{ content }}</view>
</view>
コンポーネントでイベントをリッスンし、対応するイベント関数でイベントを
this.triggerEvent送信します
Component({
// 组件中的方法需要写在methods中
methods: {
onTitleTap() {
// 发送事件, 并传递一个aaa的参数
this.triggerEvent("titleTap", "aaa")
}
}
})
コンポーネントを使用するページで、コンポーネントから渡されたイベントを受け取り、対応するイベント ハンドラーをバインドします。
<!-- 在页面中监听组件发出的事件 -->
<section-info bind:titleTap="onTitleTap" />
イベントハンドラ関数では、コンポーネントから渡されたパラメータを取得できます
Page({
onTitleTap(event) {
console.log("页面中监听到组件的事件");
// 打印组件传递出来的参数
console.log(event.detail);
}
})
ページはコンポーネント メソッドを直接呼び出します
親コンポーネントで子コンポーネントのメソッドを呼び出したい場合は、親コンポーネントで this.selectComponent を呼び出して、子コンポーネントのインスタンス オブジェクトを取得できます。
呼び出すときは、次のような一致するセレクター セレクターを渡す必要があります
this.selectComponent(".my-component")。
- コンポーネントでメソッドを定義する
Component({
// 组件中的方法需要写在methods中
methods: {
test() {
console.log("组件中的方法");
}
}
})
- セレクター 4 に一致するクラスをコンポーネントに与える必要があります
<!-- 调用组件中的方法(需要给一个class用于匹配) -->
<section-info class="section" />
<!-- 点击按钮调用组件中的方法 -->
<button bindtap="onBtnTap">按钮</button>
- メソッドを呼び出し
this.selectComponentて、子コンポーネントのインスタンス オブジェクトを取得します
Page({
onBtnTap() {
// 获取组件实例
const sectionInfo = this.selectComponent(".section")
// 调用组件中的方法
sectionInfo.test()
}
})
コンポーネント スロット定義の使用
slot は slot に変換されます:
コンピューターの USB スロット、ボードの電源スロットなど、生活のさまざまな場所にスロットがあります。
スロットの目的は、元の機器をより拡張可能にすることです。
たとえば、U ディスク、ハードディスク、携帯電話、ステレオ、キーボード、マウスなどをコンピュータの USB に挿入できます。
コンポーネントのスロット:
コンポーネントのスロットは、カプセル化するコンポーネントをより拡張可能にするためのものでもあります。
コンポーネント内の一部のコンテンツに何を表示するかをユーザーが決定できるようにします。
例: モバイル Web サイトのナビゲーション バー。
モバイル開発では、ほぼすべてのページにナビゲーション バーがあります。
必然的に、ナビゲーション バーを nav-bar コンポーネントなどのプラグインにカプセル化します。
このコンポーネントを取得したら、複数のページで再利用できます。
ただし、各ページのナビゲーションは異なります
シングルスロットの使用
コンテンツとスタイルが外の世界によって決定される可能性があることに加えて、外の世界は表示方法も決定する可能性があります。
たとえば、頭と尾を定義するコンポーネントがありますが、中央のコンテンツはテキスト、画像、または進行状況バーである可能性があります。
外の世界が挿入したい他のコンポーネントを知らなくても、コンポーネントのスロットを予約できます。
- コンポーネントの wxml ファイルでスロットを予約する
<view class="my-slot">
<view class="header">header</view>
<view class="content">
<!-- 预留插槽 -->
<slot></slot>
</view>
<view class="footer">footer</view>
</view>
- ページの wxml ファイルでスロットを使用する
<!-- 插入文本 -->
<my-slot>
<text>我是插入的文本</text>
</my-slot>
<!-- 插入按钮 -->
<my-slot>
<button size="mini">插入的按钮</button>
</my-slot>
<!-- 插入表单 -->
<my-slot>
<input type="text" value="插入的表单" />
</my-slot>
注: アプレット スロットはデフォルト値をサポートしていません
複数のスロットの使用
コンポーネントをより柔軟にするために、複数のスロットを定義する必要がある場合があります。
- コンポーネント wxml で複数のスロットを定義し、複数のスロット
nameを属性で区別する必要がある
<view class="mul-slot">
<view class="left">
<slot name="left"></slot>
</view>
<view class="center">
<slot name="center"></slot>
</view>
<view class="right">
<slot name="right"></slot>
</view>
</view>
- ページでスロット
slotを使用するには、スロットを使用するには、属性を介して使用するスロットを指定する必要があります
<mul-slot>
<view slot="left">左边</view>
<text slot="center">中间</text>
<view slot="right">右边</view>
</mul-slot>
- 複数のスロットを使用する場合は、複数のスロットの使用を有効にする必要があります。デフォルトでは、複数のスロットの使用は許可されていません
Component({
options: {
// 表示开启多个插槽
multipleSlots: true
}
})
コンポーネントのライフサイクル
コンポーネントのライフサイクルは、特別な時点で、またはいくつかの特別なフレームワークイベントに遭遇したときに自動的にトリガーされる、コンポーネント自体のいくつかの機能を指します。
その中で、最も重要なライフ サイクルは
createdattacheddetached、コンポーネント インスタンスのライフ プロセスで最も重要な時点です。
アプレット ベース ライブラリのバージョン 2.2.3 以降、コンポーネントのライフ サイクルは、lifetimes フィールドで宣言することもできます (これは推奨される方法であり、最も優先度が高くなります)。
Component({
// 组件的生命周期 推荐写到lifetimes中
lifetimes: {
created() {
console.log("组件被创建");
},
attached() {
console.log("组件被添加到组件树中");
},
detached() {
console.log("组件从组件树中被移除");
}
}
})
| ライフサイクル | パラメータ | 説明 |
|---|---|---|
| 作成した | なし | コンポーネント インスタンスが作成された直後に実行される |
| 添付 | なし | コンポーネント インスタンスがページ ノード ツリーに入ったときに実行されます。 |
| 準備 | なし | コンポーネントがビューレイヤーに配置された後に実行されます |
| 移動した | なし | コンポーネント インスタンスがノード ツリー内の別の場所に移動したときに実行されます。 |
| 切り離された | なし | コンポーネント インスタンスがページ ノード ツリーから削除されたときに実行されます。 |
| エラー | Object Error |
コンポーネントメソッドがエラーをスローするたびに実行されます |
一般に、作成されたライフサイクルではネットワークリクエストが送信され、アタッチされたライフサイクルではDOMが取得され、デタッチされたライフサイクルではコンポーネントのリサイクル操作が実行されます。
他のライフサイクルについて学ぶ
コンポーネントが配置されているページのライフサイクル
コンポーネントと強く関連していない特別なライフサイクルもありますが、コンポーネントが内部で処理するために知る必要がある場合があります。
このようなライフサイクルは「コンポーネントが配置されているページのライフサイクル」と呼ばれ、
pageLifetimes定義。
利用可能なライフサイクルは次のとおりです。
| ライフサイクル | パラメータ | 説明 |
|---|---|---|
| 見せる | なし | コンポーネントがあるページが表示されたときに実行される |
| 隠れる | なし | コンポーネントが配置されているページが非表示になったときに実行されます |
| サイズ変更 | Object Size |
コンポーネントが配置されているページのサイズが変更されたときに実行されます |
Component({
pageLifetimes: {
show: function() {
// 组件所在页面被展示
},
hide: function() {
// 组件所在页面被隐藏
},
resize: function(size) {
// 组件所在页面尺寸变化
}
}
})
コンポーネント コンストラクターの概要
