uniapp グローバルコンポーネントはグローバルに使用され (すべてのページテンプレートで使用されるわけではなく、H5 のみをサポートします)、グローバルコンポーネントメソッドは機能的に呼び出されます。

これを使用する最も簡単な方法は、main.js に次のコードを記述して、各ページに xxx コンポーネントを表示することです。

// main.js

// 引入组件
import xxx from "@/components/xxx.vue";

// 将该组件挂载在document.body下
document.body.appendChild(new xxx().$mount().$el);

グローバルコンポーネントメソッドを機能的に呼び出す

シナリオでは、いくつかの トースト コンポーネントを次のように使用する必要があります。

<template>
    <toast ref="toast"></toast>
</template>

<script>
    export default {
        methods:{
            showToast(){
                this.$refs.toast.show();
            }
        }
    }
</script>

変換後の最終的な使用方法は次のとおりです。

this.$r.toast().show();

実現方法：

1. utilsディレクトリに新しいrender.jsを作成します。

2. main.jsの下にrender.jsをバインドします。

// ...

import render from "@/utils/render";
Vue.prototype.$r = render;

// ...

3. render.jsでコンポーネントをグローバルにバインドします

// utils/render.js

// 引入vue
import vm from "vue";
// toast组件
import toast from "@/components/xxx/toast.vue";

export default {
    /**
     * 全局toast弹窗    
    */
    toast(){
        // 全局注册toast组件
        const toastCom = vm.component('toast',toast);
        // 获取uniapp根节点
        const uniappRoot = document.getElementsByTagName("uni-app")[0];
        // 初始化toast组件
		const toastComp = new toastCom();
        // 这里我每个组件内都有一个固定id，用来禁止同意组件生成多次
		if(document.getElementById(toastComp.id)){
			document.getElementById(toastComp.id).remove();
		}
        // 将toast组件添加在uniapp根节点上
		uniappRoot.appendChild(toastComp.$mount().$el);
		return toastComp;
    }
}

4. 最後に、コンポーネントメソッドを直接呼び出し、機能的な方法でコンポーネントプロパティを設定できます。

// 此show方法在toast组件的methods中定义
this.$r.toast().show();

// 此duration属性在toast组件的data中
this.$r.toast().duration;

なあ、あなたのコードにバグがなく、あなたの人生に浮き沈みがないことを願っています。

広告: (学習の機会を提供します)

フロントエンド交換学習グループ: 1063233592

PHP学習交流グループ：901759097

フロントエンドとバックエンドの学習とコミュニケーションのための WeChat グループ: WeChat に私を追加し、確認メッセージ (フロントエンド) を入力して、グループに参加させます

uniapp グローバル コンポーネントはグローバルに使用され (すべてのページ テンプレートで使用されるわけではなく、H5 のみをサポートします)、グローバル コンポーネント メソッドは機能的に呼び出されます。

グローバルコンポーネントメソッドを機能的に呼び出す

おすすめ

uniapp グローバルコンポーネントはグローバルに使用され (すべてのページテンプレートで使用されるわけではなく、H5 のみをサポートします)、グローバルコンポーネントメソッドは機能的に呼び出されます。