注意：这是在代码中调用的函数rid。

<script>
        const rid = () => "rid_" + Array.from(crypto.getRandomValues(new BigUint64Array(2))).map(item => item.toString(36)).join("");
</script>

我在一个HTML文件中使用CDN中的vue.js，我还使用jquery将Id赋给<app>元素，类似于以下内容：

<app>
</app>
<script>
(function() {
        const app_rid = rid()
        $("app").last().attr("id", app_rid)
        createApp({}).mount("#"+app_rid)
});
</script>

在我的代码中，我有两个这样的应用程序：

<!-- #app 1 -->
<app>
</app>
<script>
(function() {
        const app_rid = rid()
        $("app").last().attr("id", app_rid)
        createApp({}).mount("#"+app_rid)
});
</script>

<!-- app #2 -->
<app>
</app>
<script>
(function() {
        const app_rid = rid()
        $("app").last().attr("id", app_rid)
        createApp({}).mount("#"+app_rid)
});
</script>

我想做的是从app #2调用app #1的方法，也可以从未来可能的其他应用程序调用，如app #3、app #4等。
在我的代码中，app #1所做的是呈现 Bootstrap toast，代码如下：

<component name="toast" class="visually-hidden">
        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                        <i class="bi me-2" :class="[icon,'text-'+color]"></i>
                        <strong class="me-auto" :class="['text-'+color]">{{title}}</strong>
                        <small class="me-2">{{time}}</small>
                        <button type="button" class="btn btn-link text-danger-emphasis bi bi-x p-0" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{message}}</div>
        </div>
</component>
<app>
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <toast-component 
                        v-for="(toast, index) in toasts" 
                        :key="index" 
                        :color="toast.color"
                        :icon="toast.icon"
                        :title="toast.title" 
                        :time="toast.time" 
                        :message="toast.message"
                />
        </div>
</app>
<script>
        const rid = () => "rid_"+Math.random().toString().substring(3)
        (function() {
                const app_rid = rid();
                const toast_component_rid = rid();
                $("app").last().attr("id", app_rid);
                $("component[name=toast]").last().attr("id", toast_component_rid);
                createApp({
                        data: function() {
                                return {
                                        toasts: []
                                }
                        },
                        components: {
                                'toast-component': {
                                        props: ['color', 'icon', 'title', 'time', 'message'],
                                        template: '#'+toast_component_rid
                                }
                        },
                        methods: {
                                AddToast(toast) {
                                        this.toasts.push(toast);
                                        setTimeout(() => {
                                                this.toasts.shift();
                                        }, 5000);
                                }
                        },
                        mounted() {
                                this.AddToast({
                                        'color': 'primary',
                                        'icon': 'bi-alarm',
                                        'title': 'hello world',
                                        'time': '0ms',
                                        'message': 'toast content here'
                                })
                        }
                }).mount("#"+app_rid)
        })();
  </script>

我想要的是从其他应用程序调用此应用程序的方法AddToast()。