序文
WeChat ミニ プログラムの親子コンポーネントの作成と値の転送、および関連するコンポーネントのライフ サイクルについて。
コンポーネントを使用する利点
コンポーネントを使用すると、開発効率が向上し、機能がページ間で一貫して適用および変更されるようになります。
たとえば、上部のナビゲーション バーやコメント領域などの一部の繰り返し機能については、それらをコンポーネントに調整した後、同じコードを繰り返し記述せずに、別のページでそのコンポーネントを参照するだけで済みます。これにより、コードの量が削減され、コードの保守性が向上します。
これらの関数を変更する必要がある場合、コンポーネントが定義されている場所を変更するだけでよく、コンポーネントを参照するすべてのページが更新されるため、各ページを個別に変更する手間が省けます。
文章
作成と基本的な使い方
1.1 コンポーネントの作成
コンポーネントは通常、コンポーネントフォルダーに作成されます。
まず、コンポーネント内に新しいフォルダーを作成し、このフォルダーを右クリックして、新しいコンポーネント オプションを選択します (新しいページを自分で作成し、対応する生成された 4 つのサブファイルを、コンポーネント内に新しく作成されたコンポーネント フォルダーに移動することもできます)。作成したディレクトリ 構成は以下の通り
1.2 コンポーネントを使用→親ページまたは親コンポーネントのjsonファイルにサブコンポーネントを登録
{
"usingComponents": {
"topNav": "/components/topNav/topnav"
}
}
1.3 親ページまたは親コンポーネントにコンポーネントを適用する
<!-- 父组件中 -->
<view class="container">
<!-- 顶部菜单 -->
<topNav></topNav>
</view>
値を互いに渡したり、メソッドを呼び出したりする
上記の例は基本的な使用法にすぎず、親コンポーネントと子コンポーネント間の通信は含まれません。
親コンポーネントと子コンポーネント間の通信には、
親コンポーネントが子コンポーネントに値を渡し、子コンポーネントが親コンポーネントに値を渡し、親コンポーネントが子コンポーネントのメソッドを呼び出し、子コンポーネントが親コンポーネントのメソッドを呼び出すことが含まれます。 。
1. 親コンポーネントが子コンポーネントに値を渡す
これは最も単純で最も一般的に使用されており、主なことは、それを受け取るためにサブコンポーネント内のプロパティを使用することに注意することです。
- 親コンポーネントは値を渡します:
- childValue は、親コンポーネントから渡された値を受け取るために子コンポーネントによって使用されます。
- parentValue は、親コンポーネントによって子コンポーネントに渡される値です。
// 父组件.wxml
<text>这是父组件Component</text>
<view>
<ChildComponent childValue="{
{parentValue}}"></ChildComponent>
</view>
// 父组件.js
Page({
data: {
parentValue : 'Parent'}
})
- サブコンポーネントは以下を受け取り、使用します。
// 子组件.js
// 在子组件中声明要接收的数据类型
Component({
properties: {
childValue: String, // String代表接收的参数类型
}
})
//使用父组件传递过来的数据：
// 子组件.wxml
<text>我是子组件ChildComponent</text>
<view>父组件传递过来的数据：{
{
childValue}}</view>
このようにして、子コンポーネントは親コンポーネントによって渡された値を受け取ることができます。
2. サブコンポーネントが親コンポーネントに値を渡す
これは比較的複雑です。
triggerEvent() メソッドを使用します。使用法は Vue の $emit() に似ています。キー コード:
this.triggerEvent('myevent', value) myevent は、対応する親コンポーネントで受信されるメソッドです。
- サブコンポーネントのイベントをカスタマイズし、値を渡します
// 子组件.wxml
<view class="childContent">
<text>我是子组件ChildComponent</text>
<button type="primary" bindtap="handleTap">给父组件传值</button>
</view>
// 子组件.js
methods: {
handleTap() {
// 定义要传递的数据
let value = "ChildValue"
// 触发绑定事件, myevent为绑定的父组件中的事件名
this.triggerEvent('myevent', value)
},
}
- 親コンポーネントに導入された子コンポーネントにイベントをバインドする
// 父组件.wxml
<view class="parentContent">
<text>这是父组件Component</text>
<view>
// 绑定子组件中`triggerEvent()`对应的事件方法
<ChildComponent bindmyevent="myevent"></ChildComponent>
</view>
<view>父组件：子组件传递过来的数据 {
{
ParentValue}}</view>
</view>
//接收子组件传递过来的内容
// 父组件.js
methods: {
myevent(e) {
// 这里通过 e 就可以接收子组件传过来的内容了
console.log(e.detail)
this.setData({
ParentValue: e.detail
})
}
}
3. 親コンポーネントが子コンポーネントのメソッドを呼び出します。
ID またはクラス セレクターをサブコンポーネントにバインドし、親コンポーネントで this.selectComponent を呼び出してサブコンポーネントのインスタンス オブジェクトを取得すると、サブコンポーネントでメソッドを呼び出すことができます。
実際、サブコンポーネントのインスタンス オブジェクトを取得した後、そのメソッドを呼び出して実際にそのプロパティを取得できます。
// 子组件.js
methods: {
Foo() {
console.log("子组件的方法");
}
}
// 父组件.wxml
<view class="parentContent">
<text>这是父组件Component</text>
<view>
<ChildComponent class="ChildEvent"></ChildComponent>
</view>
<button type="primary" bindtap="ChildFoo">父组件的按钮</button>
</view>
// 父组件.js
methods: {
// 父组件点击事件，调用子组件方法
ChildFoo() {
// 获取子组件的实例,可以提前获取
let Child = this.selectComponent('.ChildEvent');
// 调用子组件中定义的方法Foo()
Child.Foo();
}
}
4. 子コンポーネントが親コンポーネントのメソッドを呼び出します。
子コンポーネントは、this.triggerEvent() を通じて親コンポーネントのメソッドを呼び出します。
親コンポーネントによって導入された子コンポーネントにイベント名とメソッド名を追加します。ChildFun
は子コンポーネントのメソッド名、ParentFun は親コンポーネントのメソッド名です。
子の ChildFun を通じて親コンポーネントの ParentFun を呼び出します。成分。
// 父组件.wxml
<view>
<ChildComponent bind:ChildFun="ParentFun"></ChildComponent>
</view>
在父组件中定义方法：
// 父组件.js
methods: {
ParentFun() {
console.log('父组件的方法');
}
}
クリック イベントが子コンポーネントに追加されます。ユーザーがクリック イベント clickParent() をトリガーすると、子コンポーネントが実行されて親コンポーネントが呼び出されます。
// 子组件.js
methods: {
clickParent() {
this.triggerEvent('ChildFun' , )
}
}
クリックすると、子コンポーネントは親コンポーネントで ParentFun() を実行します。
注: this.triggerEvent('親コンポーネント内の子コンポーネントにバインドされたイベント名', パラメーター (オプション)) に続く
パラメーターは、親コンポーネントのメソッドに従って入力されます。
親コンポーネントがパラメータを受け取らない場合は空白のままにし、1 つのパラメータを受け取った場合は 1 つを書き込み、2 つのパラメータには 2 つの値を渡します。
要約する
簡単な要約:
- 親コンポーネントが子コンポーネントに値を渡す: 子コンポーネントのプロパティが受け取る
- 子コンポーネントは値を親コンポーネントに渡します。子コンポーネントの this.triggerEvent() がトリガーされて親コンポーネントに渡されます。
- 親コンポーネントは子コンポーネントのメソッドを呼び出します。親コンポーネントは this.selectComponent を使用して子コンポーネントのインスタンス オブジェクトを取得します。
- 子コンポーネントが親コンポーネントを呼び出すためのメソッド: 子コンポーネント this.triggerEvent() が起動され、それを親コンポーネントに渡します。
子コンポーネントが親コンポーネントと通信したい場合、それが渡されているかどうかがわかります。パラメータまたは呼び出しメソッドを使用すると、this.triggerEvent() を渡すことができます。
パラメーターの受け渡しは、メソッド呼び出しの特殊なケースにすぎません。これは主に、親コンポーネントの呼び出しメソッドがこのパラメーターをどのように使用するかによって異なります。
コンポーネントのライフサイクル
詳細については、WeChat ミニ プログラムの公式ウェブサイト:ミニ プログラム公式コンポーネントのライフ サイクルをご確認ください。
コンポーネントのライフサイクルの書き方:
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
実行順序については、「WeChat ミニ プログラム - コンポーネントのライフ サイクル」の記事の説明を参照してください。
要約:
- アプレットをマウントして初期化するときは内部から外部（コンポーネントからページ）へ、アンインストールするときも内部から外部へ
- ページがロールバックすると、コンポーネントの更新に使用できる pageLifetimes の表示をトリガーできます。
コンポーネントが配置されているページのライフサイクル
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
参考
親子コンポーネントの画像と作成については、WeChat アプレットのパブリック コンポーネントのカプセル化を参照してください。親子コンポーネントは互いに値を渡し、互いのメソッドを呼び出します。親子コンポーネントの値
渡し通信とイベント トリガー。メイン参考: WeChat アプレットの親子コンポーネントの値渡し通信とイベント トリガー (最も完全で実用的な概要)