目次
vue3 は element-plus を使用して message
1 を呼び出します。グローバル element
2 で直接使用できるようになります。コンポジション API では、セットアップ メソッドは 2 つの変数
3 を導入した直後に使用できます。別の方法は、provide/inject
4 を使用することです。Composition API に記述する最も簡単な方法は、次のように押すことです。導入が必要です
vue は Element のメッセージ コンポーネントを使用します
ホームページ ウェブフロントエンド Vue.js vue3 で element-plus を使用してメッセージを呼び出す方法

vue3 で element-plus を使用してメッセージを呼び出す方法

May 17, 2023 pm 03:52 PM
vue3 element-plus message

    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 サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法 vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法 Jul 17, 2023 am 09:43 AM

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

    vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法 vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法 May 21, 2023 pm 03:16 PM

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

    vue と Element-plus を使用してファイルのアップロードおよびダウンロード機能を実装する方法 vue と Element-plus を使用してファイルのアップロードおよびダウンロード機能を実装する方法 Jul 18, 2023 pm 12:28 PM

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

    vue と Element-plus を使用してステップバイステップのフォームとフォーム検証を実装する方法 vue と Element-plus を使用してステップバイステップのフォームとフォーム検証を実装する方法 Jul 17, 2023 pm 10:43 PM

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

    Vue3 でページの部分的なコンテンツを更新する方法 Vue3 でページの部分的なコンテンツを更新する方法 May 26, 2023 pm 05:31 PM

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

    vue と Element-plus を使用してメッセージ通知とポップアップ プロンプトを実装する方法 vue と Element-plus を使用してメッセージ通知とポップアップ プロンプトを実装する方法 Jul 17, 2023 pm 10:42 PM

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

    vue と Element-plus を使用してデータをエクスポートおよび印刷する方法 vue と Element-plus を使用してデータをエクスポートおよび印刷する方法 Jul 18, 2023 am 09:13 AM

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

    DefineCustomElement を使用して Vue3 でコンポーネントを定義する方法 DefineCustomElement を使用して Vue3 でコンポーネントを定義する方法 May 28, 2023 am 11:29 AM

    Vue を使用してカスタム要素を構築する WebComponents は、開発者が再利用可能なカスタム要素 (カスタム要素) を作成できるようにする一連の Web ネイティブ API の総称です。カスタム要素の主な利点は、フレームワークがなくても、任意のフレームワークで使用できることです。これらは、異なるフロントエンド テクノロジ スタックを使用している可能性のあるエンド ユーザーをターゲットにする場合、または最終アプリケーションを使用するコンポーネントの実装の詳細から切り離したい場合に最適です。 Vue と WebComponents は補完的なテクノロジであり、Vue はカスタム要素の使用と作成に対する優れたサポートを提供します。カスタム要素を既存の Vue アプリケーションに統合したり、Vue を使用してビルドしたりできます。

    See all articles