목차
vue3은 element-plus를 사용하여 message
1 전역적으로 요소를 도입한 후
2에서 직접 사용할 수 있습니다. 구성 API에서 설정 메소드는 두 개의 변수
3 도입한 후 바로 사용할 수 있습니다. 또 다른 방법은 Provide/inject
4를 사용하는 것입니다. Composition API에서 작성하는 가장 간단한 방법은 Element를 사용하여 on Demand
vue를 도입하는 것입니다. 메시지 구성 요소
웹 프론트엔드 View.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에 전역 메서드 $message

    를 추가했습니다. globalProperties

    그래서 옵션 API

      mounted(){
        (this as any).$message.success("this.$message");
      }
    로그인 후 복사

    2에서 직접 사용할 수 있습니다. 구성 API에서 설정 메소드는 두 개의 변수

    props를 전달하고 context는 이를 컨텍스트로 대체하지만 context에는 내보내기, attrs만 있습니다. 및 슬롯, 설정에서 이를 직접 사용하면 문제가 발생합니다. 공식 웹사이트의 설명:

    setup() 내부에서는 다른 구성 요소 옵션을 구문 분석하기 전에 setup()이 호출되므로 이는 활성 인스턴스에 대한 참조가 아닙니다. setup() 내부의 이 동작은 다른 옵션의 동작과 완전히 다르게 동작합니다. setup()에서 다른 선택적 API와 함께 사용하면 혼란이 발생할 수 있습니다.

    따라서 getCurrentInstance 메소드를 호출하여 인스턴스를 얻을 수 있습니다. 이 방법은 element-plus를 전역

    //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에서 작성하는 가장 간단한 방법은 Element를 사용하여 on Demand

    //helloworld.vue
    import { inject, defineComponent,onMounted } from 'vue';
    import { ElMessage } from 'element-plus'
    export default  = defineComponent{
    setup(omprops,content){
        onMounted(()=>{
          ElMessage.success('按需引入');
        })
    }
    로그인 후 복사

    vue를 도입하는 것입니다. 메시지 구성 요소

    는 vue 파일에서 사용됩니다.

    this.$message({
      message: "提示信息",
      type: "success"
    })
    로그인 후 복사

    는 js 파일에서 사용됩니다.

    ElementUI.Message({
      message: '提示信息',
      type: 'warning'
    });
    로그인 후 복사

    위 내용은 vue3에서 element-plus를 사용하여 메시지를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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 Hentai를 무료로 생성하십시오.

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    vue 및 Element-plus를 통해 테이블 ​​편집 기능 및 행 선택을 구현하는 방법 vue 및 Element-plus를 통해 테이블 ​​편집 기능 및 행 선택을 구현하는 방법 Jul 17, 2023 am 09:43 AM

    vue 및 Element-plus를 통해 테이블 ​​편집 기능 및 행 선택을 구현하는 방법 소개: 테이블은 웹 애플리케이션을 개발할 때 자주 사용되는 구성 요소 중 하나입니다. 테이블 편집 가능성 및 행 선택 기능은 매우 일반적이고 실용적인 요구 사항입니다. Vue.js 프레임워크에서는 Element-plus 컴포넌트 라이브러리를 결합하여 이 두 기능을 쉽게 구현할 수 있습니다. 이 기사에서는 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을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.

    vue 및 Element-plus를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법 vue 및 Element-plus를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법 Jul 18, 2023 pm 12:28 PM

    Vue 및 ElementPlus를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법 소개: 웹 애플리케이션에서는 파일 업로드 및 다운로드 기능이 매우 일반적입니다. 이 기사에서는 Vue 및 ElementPlus를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법을 소개합니다. 샘플 코드를 통해 Vue와 ElementPlus를 사용하여 이러한 기능을 구현하는 방법을 쉽고 직관적으로 이해할 수 있습니다. 1. Vue 프로젝트에 ElementPlus를 설치하고 가져옵니다.

    Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법 Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법 May 26, 2023 pm 05:31 PM

    페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. Vue2에서는 v-if 명령을 사용하여 로컬 DOM을 다시 렌더링하는 것 외에도 새 빈 구성 요소를 만들 수도 있습니다. 로컬 페이지를 새로 고쳐야 할 경우 이 빈 구성 요소 페이지로 점프한 다음 다시 돌아올 수 있습니다. 빈 원본 페이지의 beforeRouteEnter 가드. 아래 그림과 같이 Vue3.X에서 새로 고침 버튼을 클릭하여 빨간색 상자 안에 DOM을 다시 로드하고 해당 로딩 상태를 표시하는 방법입니다. Vue3.X의 scriptsetup 구문에 있는 구성 요소의 가드에는

    vue 및 Element-plus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법 vue 및 Element-plus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법 Jul 17, 2023 pm 10:43 PM

    Vue 및 ElementPlus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법 웹 개발에서 양식은 가장 일반적인 사용자 상호 작용 구성 요소 중 하나입니다. 복잡한 양식의 경우 단계별 채우기 및 양식 확인 기능을 수행해야 하는 경우가 많습니다. 이 기사에서는 Vue 및 ElementPlus 프레임워크를 사용하여 이 두 가지 기능을 구현하는 방법을 소개합니다. 1. 단계별 양식 단계별 양식은 큰 양식을 여러 개의 작은 단계로 나누는 것을 의미하며, 사용자는 단계에 따라 단계를 채워야 합니다. Vue의 구성요소화 및 라우팅을 활용할 수 있습니다.

    vue 및 Element-plus를 사용하여 메시지 알림 및 팝업 프롬프트를 구현하는 방법 vue 및 Element-plus를 사용하여 메시지 알림 및 팝업 프롬프트를 구현하는 방법 Jul 17, 2023 pm 10:42 PM

    Vue 및 ElementPlus를 사용하여 메시지 알림 및 팝업 프롬프트를 구현하는 방법 소개: 웹 애플리케이션 개발에서 메시지 알림 및 팝업 프롬프트는 매우 중요한 기능 중 하나입니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 우수한 UI 라이브러리인 ElementPlus와 결합되어 다양한 팝업 프롬프트 및 메시지 알림 기능을 쉽게 구현할 수 있습니다. 이 글에서는 Vue 프로젝트에서 ElementPlus 컴포넌트 라이브러리를 사용하여 메시지 알림 및 팝업 프롬프트 기능을 구현하고 관련 코드 예제를 첨부하는 방법을 소개합니다.

    vue 및 Element-plus를 사용하여 데이터를 내보내고 인쇄하는 방법 vue 및 Element-plus를 사용하여 데이터를 내보내고 인쇄하는 방법 Jul 18, 2023 am 09:13 AM

    Vue 및 ElementPlus를 사용하여 데이터 내보내기 및 인쇄 기능을 구현하는 방법 최근 프런트 엔드 개발의 급속한 발전으로 인해 점점 더 많은 웹 애플리케이션에서 데이터 사용에 대한 사용자의 다양한 요구를 충족시키기 위해 데이터 내보내기 및 인쇄 기능을 제공해야 합니다. . 널리 사용되는 JavaScript 프레임워크인 Vue는 ElementPlus 구성 요소 라이브러리와 함께 사용하면 데이터 내보내기 및 인쇄 기능을 쉽게 구현할 수 있습니다. 이 문서에서는 데이터 내보내기 및

    DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법 DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법 May 28, 2023 am 11:29 AM

    Vue를 사용하여 사용자 정의 요소 구축 WebComponents는 개발자가 재사용 가능한 사용자 정의 요소(customelements)를 생성할 수 있는 웹 네이티브 API 세트의 집합적 이름입니다. 사용자 정의 요소의 주요 이점은 프레임워크 없이도 어떤 프레임워크에서도 사용할 수 있다는 것입니다. 다른 프런트 엔드 기술 스택을 사용하는 최종 사용자를 대상으로 하거나 사용하는 구성 요소의 구현 세부 사항에서 최종 애플리케이션을 분리하려는 경우에 이상적입니다. Vue와 WebComponents는 보완적인 기술이며 Vue는 사용자 정의 요소를 사용하고 생성하는 데 탁월한 지원을 제공합니다. 사용자 정의 요소를 기존 Vue 애플리케이션에 통합하거나 Vue를 사용하여 빌드할 수 있습니다.

    See all articles