これら2つのコンポーネントは非常に強力ですが、最後の2つの記事では、2つのスーパーコンポーネントの、導入し、まだビジネスのニーズを満たすことができないため、柔軟に複雑な構造に対処するために、埋め込まれたコンポーネントと2つのヘルパーの埋め込まれたコンポーネントの導入
組み込みコンポーネント
インラインコンポーネントは、直接コンポーネントで使用される他のコンポーネントに埋め込まれた、追加のテンプレートを導入する必要はありません、インラインコンポーネントは、アドレス指定アルゴリズムに基づいて、自動的にそのような親によって定義されたメソッドを使用する子レベルとして、親子コンポーネントの関係に対処します、またはページで定義されたメソッド 以下は、一般的に使用されるインラインコンポーネントです。
- @item
- @list
- @tree
- URL
- md
- html
- @form
例えば、リストコンポーネントをアイテムコンポーネントに導入する必要があります。
wxml
<ui-item item="{{itemConfig}}" />
ジェス
Pager({
data: {
itemConfig: {
title: 'リストタイトル',
"@list": {
listClass: 'list-class-name'
data: [...]
}
}
}
})
ページャーでコンポーネントのインスタンスを見つけ、そのAPIメソッドを使用する方法
Pager({
data: {
item: {/* item */}, // ?id = 'abc'
list: {/* list */} // ?id = 'xyz'
}
onReady(){
let abc = this.getElementsById('#abc')
abc.update({title: '新しいタイトル})
let xyz = this.getEelementsById('#xyz')
xyz.forEach(item=>{
// item.addclass/removeClass/hasClass/css/update... etクラスのAPIメソッド jquery
})
this.find('.class-name').addClass('other-class-name') // クラス名を一括追加する
}
})
組み込みコンポーネント
組み込みコンポーネントは一般的に公式定義を持っていますが、外部コンポーネントはユーザー定義に対応しています。
組み込みコンポーネントの定義場所
以下の構成例でチェックした書類
components
コア・コードには必ず
フォーム・コンポーネント
マークイット・ドキュメント・コンポーネント
モジュール
テンプレート.wxml テンプレート ✔︎
組み込みコンポーネントの定義方法
templates.wxmlファイルを開き、テンプレートを定義します。
<template name="@abc">
<block wx:if="{{util.isObject(props)}}">
<view>...</view>
</block>
</template>
上記の例では、テンプレート@abcを定義しており、テンプレートにpropsというパラメータを渡す必要があります。
組み込みコンポーネントの使用方法
埋め込みコンポーネントには、埋め込みコンポーネントを呼び出すためのプロパティ@extが定義されており、以下の例のように、アイテムコンポーネントを通して埋め込みコンポーネントを呼び出すことができます。
アイテム用wxml
<ui-item item="{{itemConfig}}" />
アイテムの構成
itemConfig = {
title: 'これはアイテム・コンポーネントの定義である。,
"@ext": { // @ext埋め込みコンポーネントを呼び出し、パラメータを渡す
is: '@abc',
property1: '', // @extextのis属性が呼び出される@abcテンプレートとすべてのサブプロパティはパッケージ化され、propsパラメータとして渡される
data: [...],
name: {},
property2: ''
}
}
通过@ext.is调用选择的模板、その他 @ext の属性は引数として渡されます。
