ビジネスを書くときによくあるシナリオは、異なるページで同じフォームを呼び出す必要があることです。一般的なインタラクションは、ポップアップウィンドウの形式でフォームを表示することですが、各ページでフォームコンポーネントを繰り返し導入するのは面倒な場合があります。 解決策は2つあります。
もちろん、ビジネス Dialog コンポーネントには一連の仕様が必要です。Props は onOk および onCancel コールバックを受け取り、データ内に表示プロパティを定義します。 <テンプレート> <el-dialog :title="タイトル" :visible.sync="表示可能" 本文に追加> <!-- ビジネスコード --> </el-ダイアログ> </テンプレート> <スクリプト> エクスポートデフォルト{ props: ['onOk', 'ビジネスに必要なその他のプロパティ'], データ() { 戻る { 表示: 偽 } } } </スクリプト> Vue2 ライティングVue2ではプラグインとして書いた方が個人的には楽だと感じています。実装は以下のとおりです。一部の操作はミックスインを使用して業務から切り離しています。 欠点は、コンポーネントが動的に挿入され、コンポーネントを表示するには Vue devtools を更新する必要があることです。 const ミックスイン = { マウント() { document.body.appendChild(this.$el) this.visible = true }, 時計: 表示(値) { // アニメーション終了後にインスタンスを破棄する if (value === false) { タイムアウトを設定する(() => { これを破棄します。 if (this.$el && this.$el.parentNode) { this.$el.parentNode.removeChild(this.$el) } }, 400) } } } } エクスポートデフォルト{ インストール(Vue, オプション) { Vue.prototype.$dialog = (名前、プロパティ) => { // プラグインの場所を基準に、静的コンパイル時に import('../components/dialogs/' + name) がチェックされます .then(モジュール => { const コンポーネント = module.default const ミックスイン = コンポーネント.ミックスイン || [] mixins.push(mixin) // 自動的に開き、ライフサイクル関数と破棄操作を動的にミックスインします。component.mixins = mixins Vue.extend(コンポーネント) を返します }) .then(ダイアログ => { const ダイアログ = 新しいダイアログ({ propsData: props || {} }) ダイアログ.$mount() }) } } } 呼び出し方法は次のとおりです。矢印関数を使用すると、onOk コールバックの this ポインターを回避できることに注意してください。 this.$dialog('GroupEdit.vue', { タイプ: '編集'、 グループ: {}、 オンOK: () => { this.freshList() } }) Vue3プラグインのバージョンの記述残念ながら、Vue3 のアップグレードにより、Vue.extend と $mount がなくなり、コンポーネントはアプリケーション内でのみレンダリングできるようになりました。 各アプリケーション間のデータは分離されているため、プラグインなどを再度導入する必要があります。同時に、やりとりをしたい場合も面倒です。同じ vuex インスタンスを導入すればできるはずですが、試していません。 結合を減らすために、レンダリングをマウントするための新しいアプリケーションのみを作成することができます 'vue' から {createApp、defineComponent} をインポートします。 'element-plus' から ElementPlus をインポートします const ミックスイン = { マウント() { document.body.appendChild(this.$el) this.visible = true }, 時計: 表示(値) { // アニメーション終了後にインスタンスを破棄する if (value === false) { タイムアウトを設定する(() => { this.$.appContext.app.unmount() }, 400) } } } } エクスポートデフォルト{ インストール(アプリ) { app.config.globalProperties.$dialog = (名前、プロパティ) => { インポート('../components/dialogs/' + 名前) .then(モジュール => { const コンポーネント = module.default mixins = component.mixins || [] とします。 mixins.push(ミックスイン) コンポーネント.mixins = ミックスイン defineComponent(コンポーネント) を返します }) .then(ダイアログ => { const app = createApp(ダイアログ、props || {}) app.use(ElementPlus) app.mount(document.createElement('div')) }) } } } Vue3 動的コンポーネントの記述Vue3ではプラグイン版も要件を満たしていますが、完全に新規アプリケーションです。これにアクセスするのはまだ少し面倒です。業務では$root、vuex、routerを使用します。 したがって、Vue3 では動的コンポーネントの方が優れています。 ルートコンポーネントに動的コンポーネントを導入し、いくつかの制御変数を定義する <テンプレート> <ルータービュー></ルータービュー> <component :is="currentDialog" v-bind="currentDialogProps" /> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { 現在のダイアログ: null、 現在のダイアログプロパティ: null } } } </スクリプト> this.$root.$dialog() を呼び出すと、見た目が醜くなります。実際には、プラグインの効果を手動でシミュレートすることもできます。 const app = createApp(App) 定数 vm = app.mount('#app') initDialog(アプリ、vm) 関数 initDialog(app, vm) { const ミックスイン = { マウント() { this.visible = true }, 時計: 表示(値) { // アニメーション終了後にインスタンスを破棄する if (value === false) { タイムアウトを設定する(() => { this.$root.currentDialog = null this.$root.currentDialogProps = {} }, 400) } } } } app.config.globalProperties.$dialog = (名前、プロパティ) => { import('./components/dialogs/' + name).then(module => { const コンポーネント = module.default mixins = component.mixins || [] とします。 mixins.push(ミックスイン) コンポーネント.mixins = ミックスイン // defineComponent(component) は必要ありません vm.currentDialog = markRaw(コンポーネント) vm.currentDialogProps = markRaw(props || {}) }) } } ちょっとしたハックな書き方Vue3コンポーネントインスタンスはアプリケーションインスタンスを取得します vm.$.appContext.app == アプリ Vue3 アプリケーション インスタンスはコンポーネント インスタンスを取得します。_instance は開発環境でのみアクセスできることに注意してください。 app._instance.proxy == vm app._instance.root.proxy == vm app._instance.ctx.$root == vm まだいくつかのトリックがありますが、使用しない方がよいでしょう。 const app = createApp(App) 定数 vm = app.mount('#app') process.env.NODE_ENV === 'production'の場合{ アプリ._インスタンス = { プロキシ: vm、 根: { プロキシ: vm }, ctx: { $ルート:vm } } } Vue のダイアログ カプセル化の実装に関するこの記事はこれで終わりです。Vue ダイアログ カプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
元のコードは次のとおりです。 <div class='コントロールグループ'&...
1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
序文前回の面接では、実行計画について質問されたとき、多くの人がそれが何なのか知りませんでした。実行計...
プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...
1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...
Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...
これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...
目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...
今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...
序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...
データベースマルチテーブル接続クエリの実装方法の詳細説明結合演算子を使用して複数のテーブルクエリを実...
目次1. ループオブジェクト内の値2. ループオブジェクト3. キーと値のループ1. ループオブジェ...
序文MySQL マスター スレーブ レプリケーションの遅延は、業界では長年の問題となっています。遅延...
目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...