写的上传vue组件为什么在app.vue里引用，功能就没问题，但在其他页面单独引用功能就有问题

问题遇到的现象和发生背景

写的上传vue组件为什么在app.vue里引用，功能就没问题，但在其他页面单独引用功能就有问题

问题相关代码，请勿粘贴截图

这是组件

<template>
  <div>
    <uploader
      :options="options"
      :file-status-text="statusText"
      class="uploader-example"
      ref="uploader"
      @file-complete="fileComplete"
      @complete="complete"
      @file-success="fileSuccess"
    >
      <div class="content">
        <div class="upload-list-content">
          <ul>
            <li class="upload-list-text">添加到文件li>
            <li>
              <uploader-btn
                ><i class="el-icon-folder">i>上传文件
            li>
            <li>
              <uploader-btn :directory="true"
                ><i class="el-icon-folder">i>上传文件夹
            li>
            <li>
              <uploader-btn :directory="true"
                ><i class="el-icon-folder-add">i>新建文件夹
            li>

            <li class="upload-list-text">添加到相簿li>
            <li>
              <uploader-btn :attrs="attrs"
                ><i class="el-icon-picture-outline">上传照片/视频
            li>
            <li>
              <uploader-btn :directory="true"
                ><i class="el-icon-picture">i>上传照片文件夹
            li>
          ul>
        div>

        <div class="upload-list">
          <div>
            <li>上传开始,剩余1项li>
            <div class="upload-list-box">
              <uploader-list class="uploader-list">uploader-list>
            div>
          div>
        div>
      div>
    uploader>
  div>
template>

<script>
export default {
  data() {
    return {
      options: {
        target: "/ffmpeg-video/upload", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: true, //开启分片测试，存在不上传，不存在才上传
        //会在整个文件上传开始前，发送一次'/ffmpeg-video/upload'同名的get请求，并将响应体就是message，传入下面函数中
        //只请求一次后端，但是下面函数是每次发送分片都自动调用一次
        checkChunkUploadedByResponse: function (chunk, message) {
          //每上传一个分片调用一次函数
          let messageObj = JSON.parse(message);
          if (messageObj.needSkiped) {
            return true; //如果已经上传完成，直接跳过
          } else {
            //否则根据
            return (
              (messageObj.uploadList || []).indexOf(chunk.offset + 1 + "") >= 0
            );
          }
          return true;
        },
      },
      attrs: {
        accept: "image/*",
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      },
    };
  },
  methods: {
    complete() {
      // debugger
      console.log("complete", arguments);
    },
    fileComplete() {
      console.log("file complete", arguments);
    },
    fileSuccess() {
      this.$axios({
        method: "post",
        url: "/ffmpeg-video/upload-success",
        data: arguments[1], //这个是fileSuccess的回调值，可以直接拿来用
      }).then(
        (response) => {
          console.log("fileSuccess");
        },
        (error) => {}
      );
    },
  },
  mounted() {
    console.log(localStorage.getItem("Access-Token"));
    this.$nextTick(() => {
      window.uploader = this.$refs.uploader.uploader;
    });
  },
};
script>

<style>
@import "@/styles/upload.css";
/* .uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
} */
style>

然后在其他页面，index.vue使用，页面没问题，可以打开上传文件选择窗口，但是上传不了

import uploader from "@/pages/UpLoad";

 components: {
    uploader,
  },

找到问题了，我的问题是在index.vue,点击上传按钮后，我写的v-if确实会生效，组件页面样式正常弹出，但是呢，v-if为false的时候，组件也不生效，我将v-if,改为了v-show，正常运行