이를 사용하는 가장 쉬운 방법은 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. render.js를 main.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에 저를 추가하고 확인 메시지(프론트엔드)를 입력한 후 그룹으로 끌어들입니다.
