精华内容
下载资源
问答
  • vue刷新瞬间闪烁,无法解析问题

    千次阅读 2017-05-19 09:11:48
    每次刷新的瞬间会无法解析,也只是一闪而已,但是体验非常不好,查阅了资料后发现是由于vue编译的时候是先渲染然后再根据v-show来条件隐藏,那样就会出现看得见的一瞬间,并且显示还在编译之前,这就导致本来刷新的...

    在使用vue的时候写了一段代码


    每次刷新的瞬间会无法解析,也只是一闪而已,但是体验非常不好,查阅了资料后发现是由于vue编译的时候是先渲染然后再根据v-show来条件隐藏,那样就会出现看得见的一瞬间,并且显示还在编译之前,这就导致本来刷新的时候要隐藏的元素有一瞬间的显示,而且还是未被编译的状态。要解决这个问题很简单,在内容标签上添加v-cloak属性,并配合css中[c-cload]{display: none;}使用即可。



    这样就解决啦!当然其它出现闪烁未编译的情况处理方法类似。

    官方给出的该属性的解释是:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

    展开全文
  • Vue组件局部刷新

    2021-05-26 13:32:26
    1.序言 (1)provide与inject 在实现组件局部刷新之前先来说一说provide与inject方法。 provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙...2.provide与inject实现VUE组件局部刷新 首先在app.vue.

    1.序言

    (1)provide与inject

      在实现组件局部刷新之前先来说一说provide与inject方法。

      provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙组件,只需要在子孙组件中用inject接收就可以了。

      (2)其他的方法实现页面刷新

    this.$router.go(0);
    location.reload();

      这两种方法都是强制刷新页面,会出现短暂的白屏闪烁,不推荐使用。

    2.provide与inject实现VUE中组件局部刷新

    首先在app.vue写入provide。

    app.vue:

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      provide(){
        return{
          reload:this.reload
        }    
      },
      data(){
        return{
          isRouterAlive:true
        }
      },
      methods:{
        reload(){
          this.isRouterAlive = false
          this.$nextTick(()=>{
            this.isRouterAlive = true
          });
        }
      }
    }
    </script>
    
    <style>
      *{
        padding: 0;
        margin: 0;
      }
    </style>
    

    在需要刷新的组件中用inject接收reload方法,然后调用,即可实现刷新。

    export default {
      name: "mainBox",
      inject:["reload"],
      data() {
        return {}
      },
      methods:{
        updateData(){
            this.reload()
        }
      }
    }

     

    展开全文
  • 有时,vue中的组件封装的太深,会导致表单新增成功后,通过 this.$emit(‘reloadUser’) 刷新组件难以操作。所以使用vue中的 provide / inject 组合 方式 参考连接 : ...1、在父组件中将要刷新组件(一般是table ...

    有时,vue中的组件封装的太深,会导致表单新增成功后,通过 this.$emit(‘reloadUser’) 刷新父组件难以操作。所以使用vue中的 provide / inject 组合 方式

    参考连接 :
    https://blog.csdn.net/qq_38337245/article/details/95065501
    https://www.cnblogs.com/yinn/p/9056731.html
    1、在父组件中将要刷新的组件(一般是table 区域组件)用 keep-alive 包裹起来

    <keep-alive v-if="isRouterAlive">
    	<MyTable/>
     </keep-alive>
    

    2、在父组件中 写 provide 和 isRouterAlive: true,

    在这里插入图片描述
    在这里插入图片描述

    3、接着在父组件的 方法中
    在这里插入图片描述
    4、在父组件的任意一个子组件中 注入
    在这里插入图片描述
    5、当子组件新增或修改完后 ,直接调用子组件中注入的 reload 即可
    在这里插入图片描述
    在这里插入图片描述
    如此,便可实现无闪烁刷新子组件

    展开全文
  • 项目中 在做表单的开发时 新增或修改需要对表格进行初始化 ,也就是置空表单 有很多方法 ,我是在子组件上加上key 每次打开子组件 key的值都会不一样 这就出现一个问题 每次打开子组件 数据置空是没问题了 总是会闪...

    项目中 在做表单的开发时 新增或修改需要对表格进行初始化 ,也就是置空表单 有很多方法 ,我是在子组件上加上key 每次打开子组件 key的值都会不一样 这就出现一个问题 每次打开子组件 数据置空是没问题了 总是会闪一下。就好请求数据 还没请求成功页面出现 html代码 一开始使用v-clock 没用!..后来查阅了一番 我一开始将key的赋值放在了 点击事件 也就是点击按钮弹出子组件这个方法中。。需要放在子组件发射的方法中 也就是关闭子组件时,我是在弹出子组件时。 下面调整后的
    子组件:

    <template>
      <div class="">
        <el-drawer
          title=""
          :visible.sync="drawer_costEndDetail"
          size="40%"
        ></el-drawer>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      props: {
        showCostEndDetail: Boolean,
        costEndData: {
          type: Object,
          default: function () {
            return {};
          },
        },
      },
      data() {
        return {
          endForm: {},
        };
      },
      watch: {
        formData: {
          immediate: true,
          handler(newValue, oldValue) {
            this.endForm = Object.assign({}, newValue);
          },
          deep: true,
        },
      },
      computed: {
       // 这里是处理 打开弹框 关闭后子组件的值无法传给父组件 props传值单向数据流的问题
        drawer_costEndDetail: {  
          get() {
            return this.showCostEndDetail;
          },
          set(v) {
            this.$emit("showEndDetailEvent", v);// 发送事件 给父组件
          },
        },
      },
      methods: {},
    };
    </script>
    <style lang='scss' scoped>
    </style>
    

    父组件:

        <cost-end-detail
          :showCostEndDetail="showCostEndDetail"
          @showEndDetailEvent="showEndDetailEvent"
          :key="key"
        ></cost-end-detail>
    
        showEndDetailEvent(v) {  // 父组件接收的方法
          this.showCostEndDetail= v;
          this.key = new Date().getTime();
        },
    
    
    展开全文
  • 今天在做个人博客的时候遇到了这样一个问题,一个文章详情页面使用了评论显示组件和发表评论组件,但是当评论发表完成后评论显示组件的数据不会自动渲染出来,那么如何让最新的数据渲染呢 问题分析 可以看出这两个...
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2019-06-08 10:54:18
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新...用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 所以,我们选择第三种方式: 3. 首先在App里面...
  • vue解决刷新闪烁

    千次阅读 2018-04-25 22:35:38
    1.在vue容器的div里面加上 v-cloak &lt;div id="app" v-cloak&gt; 2.样式文件中加上 &lt;style type="text/css"&gt; [v-cloak] { display: none !important; } &lt...
  • 在需要刷新的地方直接使用vue的路由跳转 this.$router.go(0) 方式三:(推荐此方式,因为此方法不会出现短暂闪烁的空白页) 第一步:App.vue页面 <template> <div id="app"> <div class=...
  • Vue 刷新局部页面(不闪烁

    千次阅读 2019-11-06 13:26:00
    首先在App.vue组件写入 <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', p...
  • 今天在做个人博客的时候遇到一个问题,一个文章详情页面使用了评论显示组件和发表评论组件,但是当评论发表完成后评论显示组件的数据不会自动渲染出来,那么如何让最新的数据渲染呢 问题分析: 可以看出这两个组件...
  • Vue刷新页面

    2021-01-25 14:02:10
    我们在写项目的时候,经常会...用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 所以,我们选择第三种方式: 3. 首先在App里面写下如下代码: <template> <div id="app"&g.
  • Vue 刷新当前页面

    2019-03-29 09:53:48
    1.场景 在处理列表时,常常有删除...2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入...
  • vue刷新页面

    2020-09-09 09:55:18
    注:前两种方式都是强制刷新页面,会出现短暂的闪烁,用户体验不好,推荐第三种方式 3.使用provide / inject ——推荐 3.1 原理 通过控制router-view 的显示与隐藏,来重渲染路由区域,达到页面刷新的效果,show ->...
  • 标签做图标,必须给它加上宽度,否则刷新页面总会感觉整个组件在抖动,感觉整个页面在抖动,其实不是,只要使用了图标的都会抖动,所以要给一个固定的宽度让它撑住,就算刷新页面图标闪烁也不会影响这个布局的抖动。...
  • vue 刷新

    2019-03-01 17:03:00
    用到了select的multiple多选属性,同时又引入了地图,在添加完数据时,出现了一些问题,比如需要添加数据成功的同时清空定位等,同时select的多选属性造成了value.push的问题,几种方案比较之下,刷新可以同时解决...
  • Vue解决浏览器闪烁问题

    千次阅读 2018-11-25 10:48:58
    Vue解决浏览器闪烁问题: 1.使用v-cloak指令: &lt;h1 v-cloak&gt;{{message}}&lt;/h1&gt; //同时style内需要设置具有 v-cloak属性的元素display为none &lt;style&gt; [v-cloak] { ...
  • 大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现尾部组件闪烁的问题。...
  • 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好,在vue中可以使用provide/inject组合,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游...
  • 关于Vue 刷新页面

    2019-10-09 02:38:02
    Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么...
  • 初学VUE&组件

    2019-04-25 18:00:55
    vue router:用来做路由 vuex:用来管理 mvvm:model-view-viewmodel v-for:指令 cdn:内容分发网络 Object.defineProperty(对象名,‘x’,操作对象):在一个对象上定义或修改新的值 操作对象中的get方法在调用obj...
  • vue刷新当前页面不常用,在我的项目中还是有类似的需求,这里记录一下吧 在app.vue中添加刷新方法 <template> <div id="app"> <router-view v-if="isRouterAlive" />//通过变量控制路由重新加载...
  • vue 刷新当前页面或者跳转页面时候刷新

    万次阅读 多人点赞 2018-08-03 14:59:13
    2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好 解决办法 方式一 先新建一个空白页面, 先跳到空白页面, 然后再从空白页面跳转回来 ...
  • vue刷新当前页面方法

    2021-04-16 13:54:40
    1.在App.vue中作如下修改 1.在router-view标签中添加v-if <template> <div id="app"> .... <router-view v-if="isRouterAlive"></router-view> </div> </template> 2.在...
  • 但是在实际开发中前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 所以,我们选择第三种方式: provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 956
精华内容 382
关键字:

vue刷新组件闪烁

vue 订阅