vue3でDOMをマウントするためのプラグインを書く際の問題について

vue3でDOMをマウントするためのプラグインを書く際の問題について

vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も

// メイン.js
'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'element-plus' から ElementPlus をインポートします

const app = createApp(App)
app.use(ElementPlus) // Ele.me フレームワークを使用する app.mount('#app')

したがって、Vue.extend もなくなりました。

Vue2 はプラグインを作成します:

エクスポートデフォルト関数インストール(Vue){
  アプリをVue.extend({
    レンダリング (h) {
      h('div', { を返す
        スタイル: {
          表示: this.isShow ? 'flex' : 'none'
        }
      })
    }
  })

  appDom = new app({
    el: document.createElement('div'),
    データ: 関数 () {
      戻る {
        isShow: 偽
      }
    }
  })

  関数表示(){
    appDom.isShow = true
  }

  関数hide(){
    appDom.isShow = false
  }
  Vue.prototype.$show = 表示
  Vue.prototype.$hide = 非表示
  document.body.appendChild(appDom.$el)
}

Vue3 はプラグインを作成します:

'vue' から {createApp, h} をインポートします。

エクスポートデフォルト関数インストール(アプリ){
  アプリをcreateApp({
    データ() {
      戻る {
        isShow: false、
      }
    },
    与える() {
      h('div', { を返す
        スタイル: {
          表示: this.isShow ? 'flex' : 'none'
        }
      })
    }
  })
  
  const vNodeDom = document.createElement('div')
  document.body.appendChild(vNodeDom)
  定数 vm = app.mount(vNodeDom)

  App.config.globalProperties.$show = 関数(){
    vm.isShow = 真
  }

  App.config.globalProperties.$hide = 関数 () {
    vm.isShow = 偽
  }
}

比較すると、vue3 の DOM マウント方法は、新しいアプリを作成し、mount() メソッドを呼び出してページに挿入することであることがわかります。

グローバルメソッドのマウント方法も、vue2 の Vue.prototype から vue3 の App.config.globalProperties に変更されます。

また、vue3 プラグインが createApp を使用して新しい DOM 構造を作成し、それをページに挿入する場合、main.js で作成されたアプリから分離されるため、main.js で使用されるコンポーネントとパブリック メソッドはこのプラグインでは使用できません。

// myCom.vue
<テンプレート>
  <el-button>ボタン</el-button>
</テンプレート>


// myCom.js
'vue' から {createApp, h} をインポートします。
'./myCom.vue' から myCom をインポートします。
エクスポートデフォルト関数インストール(アプリ){
  アプリをcreateApp({
    データ() {
      戻る {
        isShow: 偽
      }
    },
    与える() {
      h(myCom) を返す
    }
  })

  const vNodeDom = document.createElement('div')
  document.body.appendChild(vNodeDom)
  app.mount(vNodeDom)
}

上記の例では、el-button を正常に表示できず、コンソールにエラーが報告されます。

[Vue 警告]: コンポーネントの解決に失敗しました: el-button

そのため、新しい DOM を作成し、main.js にグローバルに登録されたコンポーネントとメソッドを使用する場合は、createApp は使用できません。

vue3 の開発者と相談した結果、次の解決策を思いつきました: (問題)

'vue' から {render, h } をインポートします。
'./myCom.vue' から myCom をインポートします。

エクスポートデフォルト関数インストール(アプリ){
  vNode = h({
    データ() {
      戻る {
        isShow: false、
      }
    },
    与える() {
      h(myCom) を返す
    }
  })

  const vNodeDom = document.createElement('div')
  document.body.appendChild(vNodeDom)
  vNode.appContext = App._context
  レンダリング(vNode、vNodeDom)

  App.config.globalProperties.$show = 関数(){
    vNode.component.proxy.isShow = true
  }

  App.config.globalProperties.$hide = 関数 () {
    vNode.component.proxy.isShow = false
  }
}

今回は、新しいアプリは作成されません。代わりに、元のアプリのコンテキストが vNode にコピーされ、コンポーネントとパブリック メソッドを共有できるようになります。

新しく作成されたプラグインのプロパティとメソッドには、vNode.component.proxy を介してアクセスします。

el-buttonも正しく解析されます

Vue3 で DOM をマウントするプラグインの書き方に関する記事はこれで終わりです。Vue の DOM をマウントするプラグインに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue コンポーネントをグローバルメソッドにマウントするサンプルコード
  • VueはJSEncryptを使用してRSA暗号化とマウント方法を実装します
  • Vue.extendはインスタンスへのマウント方法を実装します
  • Vue3.0 でオブジェクトとメソッドをグローバルにマウントする方法

<<:  MySQL のダウンロードとインストールの詳細グラフィックチュートリアル

>>:  CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

推薦する

MySQL マスタースレーブ構成の学習ノート

● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

NginxはIP経由の直接アクセスを禁止し、カスタム500ページにリダイレクトします

設定ファイルに直接 サーバー{ listen 80 default; # IPへの直接アクセスを禁止...

HTML コード内のスペースと空白行についての簡単な説明

HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示され...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

プロファイルを使用して遅い SQL を分析する MySQL の詳細な説明 (グループ左結合はサブクエリよりも効率的です)

プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...

Linux におけるシステム入出力管理の詳細な説明

システムの入力と出力の管理1. システムの入力と出力を理解するLinuxシステムでは、1は正しい出力...

LinuxデバッガGDBの基本的な使い方の詳細な説明

目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...

HTMLの最適化によりWebページの速度が向上

明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...

VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。

次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

MySQL 8.0 の新機能の落とし穴と解決策についての簡単な説明 (要約)

1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...