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 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

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

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

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

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

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

뜨거운 주제











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

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

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는 우수한 UI 라이브러리인 ElementPlus와 결합되어 다양한 팝업 프롬프트 및 메시지 알림 기능을 쉽게 구현할 수 있습니다. 이 글에서는 Vue 프로젝트에서 ElementPlus 컴포넌트 라이브러리를 사용하여 메시지 알림 및 팝업 프롬프트 기능을 구현하고 관련 코드 예제를 첨부하는 방법을 소개합니다.

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

vue3+ts+axios+pinia는 무의미한 새로 고침을 실현합니다. 1. 먼저 프로젝트에서 aiXos 및 pinianpmipinia를 다운로드합니다--savenpminstallaxios--save2. AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
