Vue.js 如何在没有注入的情况下创建全局组件？

在这种情况下，我们需要一个全局组件来使用它，如

this.$toast（'some words'）

或

this.$dialog（{title:'title words'，contentText:'some words'）

在Vue 2.x中，我们可以将

Toast.Vue

的方法添加到

Vue.prototype

，并在任何地方调用

Toast.Vue

的方法。但是在Vue 3.x中我们如何做到这一点呢

我在

vue next

中阅读了i18n插件演示的文档。但是它需要将i18n插件插入到需要使用它的每个组件中。这并不方便。

vue 3提供了一个用于附加全局属性的方法：

从“vue”导入{createApp}
const-app=createApp（{}）
app.config.globalProperties.$toast=（）=>{/*…*/}

在vue3应用程序中任何位置显示组件的方式，无需注入 机制 每次都将组件装入dom

实施 使用“Toast”例如：

步骤1：创建SFC（Toast.vue） 步骤3：使用 在main.js中

import ToastPlugin from 'xxx/ToastPlugin'
import { createApp } from 'vue'

const app = createApp({})
app.use(ToastPlugin)

// then the toast can be used in anywhere like this:
this.$toast('some words')
this.$toast({msg:'some words',timeout:3000})

---

谢谢！如果toast被写为包含一个名为'show（msg）'的方法的SFC，有没有办法在toast.vue之外调用它？PS:show方法cantain'setTimeout'来关闭toast“在toast.vue之外调用它”是什么意思？我想在

app.config.globalProperties

中定义一个名为

$toast

的函数来调用

show（）

在Toast.vue中。目的是在vue应用程序中的任何位置显示Toast，而不需要导入或“注入”Toast.vue。经过研究，我找到了一种方法：app.config.globalProperties的行为。$Toast是“每次调用

$Toast

时创建一个新的应用程序实例并移动Toast.vue”.也许这不是最好的方法，但它很有效。

import Toast from "./Toast.vue";
import {createApp} from 'vue'
const install = (app) => {
    // dom container for mount the Toast.vue
    let container;
    // like 'app' just for Toast.vue
    let toastApp;
    // 'props' that Toast.vue required.
    const baseProps = {
        // define a function to close(unmount) the toast used for 
        // case 1: in Toast.vue "click toast appeared and close it"
        // case 2: call 'this.$closeToast()' to close the toast in anywhere outside Toast.vue
        close:()=> {
            if (toastApp)
                toastApp.unmount(container);

            container = document.querySelector('#ToastPlug');
            if(container)
                document.body.removeChild(container);
        }
    };
    
    // show Toast
    const toast = (msg)=>{
        if(typeof msg === 'string')
            msg = {msg};

        const props = {...baseProps,...msg}
        console.log('props:',JSON.stringify(props));

        // assume the toast(previous) was not closed, and try to close it.
        props.close();

        // create a dom container and mount th Toast.vue
        container = document.createElement('div');
        container.setAttribute('id','ToastPlug');
        document.body.appendChild(container);
        toastApp = createApp(Toast, props);
        toastApp.mount(container);
    }
    
    // set 'toast()' and 'close()' globally
    app.config.globalProperties.$toast = toast;
    app.config.globalProperties.$closeToast = baseProps.close;
}

export default install;

import ToastPlugin from 'xxx/ToastPlugin'
import { createApp } from 'vue'

const app = createApp({})
app.use(ToastPlugin)

// then the toast can be used in anywhere like this:
this.$toast('some words')
this.$toast({msg:'some words',timeout:3000})