Uniapp 開発アプレットでカスタム コンポーネントを作成し、値の転送を実装する方法

uni プロジェクトを開発しているとき、ポップアップ ウィンドウやボタンのセットなど、いくつかの共通モジュールを使用する必要があることがよくあります。ページごとに繰り返し記述すると、時間がかかり、あまり良くありません。システムの保守・管理のため、任意呼び出しの目的を達成するために汎用モジュールとして記述する必要があります。

すべてのコンポーネントは、新しいプロジェクトにこのディレクトリがない場合は、自分で作成することもできます。定義されたコンポーネント (shopwind-multpicker) の構造は次のとおりです。コンポーネントを定義した後、フォルダーをビュー (vue) で呼び出すことができます。コード例は次のとおりです。

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

これでコンポーネントの表示が完了しました。コンポーネントの値を親に渡すにはどうすればよいですか。コンポーネント (shopwind-multpicker.vue) ファイルで this.$emit メソッドを使用します:

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

次に、親ページで、emit の最初のパラメータと同じ名前のメソッドを定義する必要があります (ここでは、confirm ) コンポーネントの戻り結果を受け取るためのメソッドです。このメソッドはメソッド

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

で定義されています。これで親子ページの値の転送が完了します。この例では、プラグインである shopwind-multpicker コンポーネントが使用されています。地域連携などの3段階連携に対応したプラグインは、Dcloudプラグインマーケットに公開されておりますので、必要に応じてダウンロードしてご利用ください。プラグインマーケットで無料:

以上がUniapp 開発アプレットでカスタム コンポーネントを作成し、値の転送を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。