vue3 で element-plus を使用してメッセージを呼び出す方法
vue3 は element-plus を使用して message
Environment: vue3 typescript element-plus
1 を呼び出します。グローバル element
エレメントの導入後、app.config.globalProperties にグローバル メソッド $message
が追加されたため、オプション API
mounted(){ (this as any).$message.success("this.$message"); }
2 で直接使用できるようになります。コンポジション API では、セットアップ メソッドは 2 つの変数
props と context を渡します。context はこれをコンテキストとして置き換えますが、context には Emit、attrs、およびスロットのみがあります。これをセットアップで直接使用すると、問題が発生します。 : 公式ウェブサイト 注:
setup() 内では、これはアクティブなインスタンスへの参照にはなりません。setup() は他のコンポーネント オプションを解析する前に呼び出されるため、setup() 内での動作は異なります。他のオプションとはまったく異なります。 setup() で他のオプションの API と一緒に使用すると、混乱が発生する可能性があります。
したがって、getCurrentInstance メソッドを呼び出すことでインスタンスを取得できます。このメソッドは、element-plus global
//helloworld.vue import { getCurrentInstance, defineComponent,onMounted } from 'vue'; export default = defineComponent{ setup(omprops,content){ onMounted(()=>{ getCurrentInstance()?.appContext.config.globalProperties.$message.success("聪明"); }) }
3 を導入した直後に使用できます。別の方法は、provide/inject
//main.ts import { createApp } from 'vue' import App from './App.vue' import element from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import {ElMessage} from 'element-plus' const app = createApp(App) app.use(element) //如果没有全局引用element,还需写下面一句 //app.config.globalProperties.$message = ElMessage; app.provide('$message', ElMessage) app.mount('#app')
//helloworld.vue import { inject, defineComponent,onMounted } from 'vue'; export default = defineComponent{ setup(omprops,content){ onMounted(()=>{ (inject('$message') as any).success("inject"); }) }
4 を使用することです。Composition API に記述する最も簡単な方法は、次のように押すことです。導入が必要です
//helloworld.vue import { inject, defineComponent,onMounted } from 'vue'; import { ElMessage } from 'element-plus' export default = defineComponent{ setup(omprops,content){ onMounted(()=>{ ElMessage.success('按需引入'); }) }
vue は Element のメッセージ コンポーネントを使用します
vue ファイルで使用します
this.$message({ message: "提示信息", type: "success" })
js ファイルで使用します
ElementUI.Message({ message: '提示信息', type: 'warning' });
以上がvue3 で element-plus を使用してメッセージを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法 はじめに: テーブルは、Web アプリケーションの開発時に頻繁に使用されるコンポーネントの 1 つです。テーブルの編集機能と行選択機能は、非常に一般的で実用的な要件です。 Vue.js フレームワークでは、Element-plus コンポーネント ライブラリを組み合わせることで、これら 2 つの機能を簡単に実現できます。この記事では、Vue と Element-plus を使用してテーブルの編集機能と行選択機能を実装する方法を紹介し、対応するコード例を示します。 1. プロジェクトの精度

Vue と ElementPlus を使用してステップバイステップのフォームとフォーム検証を実装する方法 Web 開発では、フォームは最も一般的なユーザー インタラクション コンポーネントの 1 つです。複雑なフォームの場合、多くの場合、段階的な入力とフォーム検証機能を実行する必要があります。この記事では、Vue と ElementPlus フレームワークを使用して、これら 2 つの機能を実現する方法を紹介します。 1. ステップバイステップフォーム ステップバイステップフォームとは、大きなフォームをいくつかの小さなステップに分割し、ユーザーはステップに従ってステップを入力する必要があります。 Vue のコンポーネント化とルーティングを活用できます

vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します

Vue と ElementPlus を使用してファイルのアップロードおよびダウンロード機能を実装する方法 はじめに: Web アプリケーションでは、ファイルのアップロードおよびダウンロード機能は非常に一般的です。この記事では、VueとElementPlusを使ってファイルのアップロード・ダウンロード機能を実装する方法を紹介します。サンプルコードを通じて、Vue と ElementPlus を使用してこれらの機能を実装する方法を簡単かつ直感的に理解できます。 1. ElementPlus のインストールとインポート. ElementPlus を Vue プロジェクトにインストールします。

ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、

Vue と ElementPlus を使用してメッセージ通知とポップアップ プロンプトを実装する方法の紹介: Web アプリケーション開発において、メッセージ通知とポップアップ プロンプトは非常に重要な機能の 1 つです。人気のフロントエンド フレームワークである Vue を、優れた UI ライブラリである ElementPlus と組み合わせることで、さまざまなポップアップ プロンプトやメッセージ通知機能を簡単に実装できます。この記事では、Vue プロジェクトで ElementPlus コンポーネント ライブラリを使用してメッセージ通知およびポップアップ プロンプト機能を実装する方法を紹介し、関連するコード例を添付します。

VueとElementPlusを使ってデータエクスポート・印刷機能を実装する方法 近年、フロントエンド開発の急速な発展に伴い、ユーザーの多様なデータ活用ニーズに応えるため、Webアプリケーションにデータエクスポート・印刷機能を提供するケースが増えています。 。人気の JavaScript フレームワークである Vue を ElementPlus コンポーネント ライブラリと併用すると、データ エクスポートおよび印刷機能を簡単に実装できます。この記事では、データのエクスポートと

vue3+ts+axios+pinia で無意味なリフレッシュを実現 1. まず、プロジェクト内の aiXos と pinianpmipinia をダウンロードします--savenpminstallaxios--save2. axios リクエストをカプセル化-----ダウンロード js-cookienpmiJS-cookie-s// aixosimporttype{AxiosRequestConfig , AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
