vue3.0自定义插件

最新推荐文章于 2024-08-20 23:10:52 发布

小小亮01

最新推荐文章于 2024-08-20 23:10:52 发布

阅读量983

点赞数

分类专栏： vue3 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43845137/article/details/123602816

版权

本文介绍如何在Vue3.0中自定义一个Loading插件，包括`components/loading/Loading.vue`组件的定义，使用`defineExpose`暴露属性，以及在`index.ts`中安装为插件，并在`main.ts`和组件A中应用的过程。

摘要由CSDN通过智能技术生成

vue3.0自定义插件

自定义一个 Loading插件

components / loading / Loading.vue

定义一个Loading组件
- defineExpose ：组件暴露自己的属性
- 组件暴露出来的属性，拿到这些暴露的属性数据
  - 一般来说使用 ref 节点的形式去拿到
    - child.value.XXX
  - 也可以直接访问组件然后去拿数据
    - import Loading from "./Loading.vue" // 引入组件
    - const VNode:VNode = createVNode(Loading) // 组件创建虚拟dom
    - VNode.component?.exposed 去拿数据

<!-- Loading组件 -->
<template>
  <div v-if="isShow" class="loading">
    <div class="loading-content">Loading...</div>
  </div>
</template>

<script setup lang="ts">
import {
    ref } from 'vue'
let isShow = ref<Boolean>(false)
const show = () => {
   
  isShow.value = true
}
const hide = (