Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3

vue3 menggunakan elemen-tambah untuk memanggil mesej

Persekitaran: vue3+typescript+element-plus

1 . Selepas pengenalan global elemen

telah menambah kaedah global $message

dalam app.config.globalProperties, jadi ia boleh digunakan terus dalam pilihan API

  mounted(){
    (this as any).$message.success("this.$message");
  }

2. Dalam Komposisi Kaedah persediaan dalam API lulus dalam dua pembolehubah

konteks menggantikan ini sebagai konteks, tetapi konteks hanya mempunyai emit, attr dan slot , masalah akan berlaku: Penerangan Rasmi dari tapak web:

Persediaan dalaman(), ini tidak akan menjadi rujukan kepada contoh aktif, kerana persediaan() dipanggil sebelum menghuraikan pilihan komponen lain, jadi tingkah laku ini inside setup() Berbeza sepenuhnya daripada ini dalam pilihan lain. Kekeliruan boleh berlaku apabila anda menggunakannya dengan API pilihan lain dalam persediaan().

Oleh itu, contoh boleh diperolehi dengan memanggil kaedah getCurrentInstance. Kaedah ini boleh digunakan secara terus selepas memperkenalkan elemen-tambah secara global

//helloworld.vue
import { getCurrentInstance, defineComponent,onMounted } from 'vue';
export default  = defineComponent{
setup(omprops,content){
    onMounted(()=>{
      getCurrentInstance()?.appContext.config.globalProperties.$message.success("聪明");
    })
}

3 Kaedah lain adalah dengan menggunakan 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 Adalah perlu untuk memperkenalkan

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

vue untuk menggunakan komponen mesej Elemen

untuk menggunakan

this.$message({
  message: "提示信息",
  type: "success"
})

dalam fail vue

untuk menggunakan

ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

dalam fail js

Atas ialah kandungan terperinci Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!