Vue 笔记

仅记录使我不眠不休打代码的vue错误

v-if可以用来销毁和重置组件 配合事件总线来触发接收就不需要用定时循环获取了
事件总线的接收要使用$off(事件名)先关闭，不然就会接收多次

其次事件的发送如果和重定向处在同一段代码块，必须要给 $emit() (发送事件) ，外面加个延迟定时，否则会先重定向一步发送导致后续报错。

//2022-11-20 3:52
//熬夜打代码思考的一晚
    
//发送事件 
//延迟来传递信息，信息可以在页面未重置时接收但无法显示，所以延迟
  setTimeout(()=>{
    this.$EventBus.$emit("distoryDataview",name)
  },200)
  this.$router.push({path:"/home/web/redirect"})


<template>
  <div>
    <div v-show="database!=''" separator="/" style="margin:18px 0;font-size:18px;">
      <span>{{this.web}} / </span>
      <span class="database" @click="webDatabase">{{database}} / </span>
      <span v-if="table!=''">{{table}}</span>
    </div>
    <div v-if="distory_">
      <router-view></router-view>
    </div>
  </div>
</template>
 
销毁重置组件事件

  this.$EventBus.$off('distoryDataview')
  this.$EventBus.$on("distoryDataview",(value)=>{
    console.log("总线接收到事件",value)
    this.web=value
    this.$axios.get("api/webDatabase?name="+value).then(async (data)=>{
      this.database=data.data
    })
    this.distory_=false
    //重置页面信息
    this.distory_=true
    //发送信息
    this.$EventBus.$emit("ShowDataTable",value)
  })


接收事件 使用axios 获取当前网站的数据库中所有的表列出来，然后放到table_arr中

  this.$EventBus.$off('ShowDataTable')
  this.$EventBus.$on("ShowDataTable",(value)=>{
    console.log("显示表",value)
    this.$axios.get("api/webTableName?name="+value).then(async (data)=>{
      this.table_arr=[data.data]
      console.log(this.table_arr)
    })
  })

我搞了有几个小时了,不去网上找答案确实挺难的，没参考，没报错，还好我发现了接收事件打印比传输事件快我就知道有问题了

我一直以为是销毁组件的地方缺少延迟，后来才发现是重定向有问题,真是连锁反应，一步慢，步步慢。

如果能重来，那就最好不要来。