vue3에서 element-plus를 사용하여 메시지를 호출하는 방법
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











vue 및 Element-plus를 통해 테이블 편집 기능 및 행 선택을 구현하는 방법 소개: 테이블은 웹 애플리케이션을 개발할 때 자주 사용되는 구성 요소 중 하나입니다. 테이블 편집 가능성 및 행 선택 기능은 매우 일반적이고 실용적인 요구 사항입니다. Vue.js 프레임워크에서는 Element-plus 컴포넌트 라이브러리를 결합하여 이 두 기능을 쉽게 구현할 수 있습니다. 이 기사에서는 Vue 및 Element-plus를 통해 테이블 편집 가능성 및 행 선택 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 1. 프로젝트의 정확성

vue3+vite:src는 require를 사용하여 이미지를 동적으로 가져오고 vue3+vite는 여러 이미지를 동적으로 가져옵니다. vue3을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.

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

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

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

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

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

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