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 を正常に表示できず、コンソールにエラーが報告されます。
そのため、新しい 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL のダウンロードとインストールの詳細グラフィックチュートリアル
>>: CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします
● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...
状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...
1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...
設定ファイルに直接 サーバー{ listen 80 default; # IPへの直接アクセスを禁止...
HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示され...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...
Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...
プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...
システムの入力と出力の管理1. システムの入力と出力を理解するLinuxシステムでは、1は正しい出力...
目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...
明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...
次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...