精华内容
下载资源
问答
  • vue重新加载组件 进行数据重新赋值

    千次阅读 2020-04-26 14:09:27
    方法一 <router-view :key="当前时间戳即可"> </router-view> <select-tree-modal :info="typeCPZY" @ok="setCPZY" v-decorator="['assessmentMajor', {}]" :treeChild="cpzyID" :key="getTime()"&...

    方法一

    <router-view :key="当前时间戳即可">
    </router-view>
    
    <select-tree-modal :info="typeCPZY"  @ok="setCPZY"  v-decorator="['assessmentMajor', {}]" :treeChild="cpzyID" :key="getTime()"></select-tree-modal>
    
    
          getTime(){
            var timestamp=new Date().getTime();
            console.log(timestamp);
            return timestamp;
          }
    
    

    方法二

    <template>
    <router-view v-if="isRouterAlive"/>
    </template>
    <script>
    export default {
     data () {
       return {
         isRouterAlive: true
       }
     },
     methods: {
       reload () {
         this.isRouterAlive = false
         this.$nextTick(() => (this.isRouterAlive = true))
       }   
     }
    }
    </script>
    
    展开全文
  • 背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。...目前采用Vue动态加载异步组件的方式来实现小组件之间的通信。当然门户也要提供一个通信的基线:Vu
  • 主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue实现当前组件重新加载

    万次阅读 多人点赞 2019-04-03 10:40:49
    Vue实现当前组件重新加载 遇到问题的场景: 需要把当前组件完全还原成初始化状态,不要页面全部刷新 例如:重置按钮,只刷新当前加载组件 其他办法: 使用vue-router重新定向到当前页面,页面不刷新 使用window-...

    Vue实现当前组件重新加载


    遇到问题的场景:
    需要把当前组件完全还原成初始化状态,不要页面全部刷新
    例如:重置按钮,只刷新当前加载组件

    其他办法:
    使用vue-router重新定向到当前页面,页面不刷新
    使用window-reload() 页面全部刷新,用户体验太差

    解决方法:
    使用v-if provide inject和this.$nextTick()【版本限制 vue2.2.0】

    原理:
    使用v-if控制router-view的显示或隐藏(v-if会把事件监听器和自组件适当的销毁或者重建)
    使用provide / inject组合解决自组件层级比较深的问题
    使用this.$nextTick()实现页面异步刷新

    provide / inject
    就是父组件中使用provide提供变量(对象或者是一个函数),在子组件中通过inject来注入变量
    不管层级有多深,并在起上下游关系成立的时间始终生效

    this.$nextTick()
    当dom发生变化,更新后执行的回调

    实际代码:
    在App.vue里面,声明reload方法,然后通过provide把reload方法注入,使用bol值控制router-view隐藏(销毁),再通过this.$nextTick()在dom更新之后利用bol控制router-view重新加载,实现页面刷新的效果

    <template>
      <div id="app">
        <router-view v-if="isRouterShow"/>
      </div>
    </template>
    <script>
    export default {
      name: 'App',
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterShow: true
        }
      },
      methods: {
        async reload () {
          this.isRouterShow = false
          await this.$nextTick()
          this.isRouterShow = true
        }
      }
    }
    </script>
    

    在子组件里面
    使用inject注入App.vue提供的reload依赖,然后在需要的地方直接调用this.reload()方法即可

    export default {
      inject: ['reload'],
      methods: () {
      	reloadFun () {
      		this.reload()
      	}
      }
     }
    

    Vue提倡数据驱动dom,但是存在特殊情况,如果有更好的解决方法,请多多指教!

    展开全文
  • vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
  • 主要介绍了vue远程加载sfc组件思路详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue之,组件重新加载刷新

    千次阅读 2020-06-09 11:17:41
    因业务需要,笔者需要做一个vue组件定时刷新重新加载的效果。 以前做过一次,页面重新加载的效果,**在app.vue内配置reload函数,在需要刷新的页面调用。但是使用这样的方式实现组件或者页面刷新,会有短暂的白屏...

    因业务需要,笔者需要做一个vue组件定时刷新重新加载的效果。

    以前做过一次,页面重新加载的效果,在app.vue内配置reload函数,在需要刷新的页面调用但是使用这样的方式实现组件或者页面刷新,会有短暂的白屏现象。

    经过查阅资料,我使用了dom元素绑定key值,通过改变key值的方式来实现了组件的重新加载效果。经实测,此方法可以规避页面出现短暂白屏的现象。

    具体代码如下:

    <template>
    	<div class="main" :key='menukey'></div>
    	
    </template>
    <script>
    	export default {
    		data(){
    			return{
    				menukey: 0,
    				setDateTime: null
    			}
    		},
    		mouted(){
    			this.setDateTimeInterval()
    		},
    		methods:{
    			// 设置定时器
    			setDateTimeInterval(){
    				this.setDateTime = setInterval(()=>{
    					this.menukey ++
    				}, 1000 * 60 * 3)
    			},
    			// 清除定时器
    			destroyed(){
    				clearInterval(this.setDateTime)
    				this.setDateTime = null
    			}
    		}
    	}
    </script>
    
    

    主要思路就是,通过改变dom元素的key值,来实现组件的重新加载。

    展开全文
  • vue加载中图标组件

    2019-08-12 01:07:48
    vue加载中图标组件
  • vue组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性。很多情况下,父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性,来渲染...

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性。很多情况下,父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性,来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点,如果我们这一次和上一次传过去的属性值一样的话,watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行),导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。(很尴尬,让我这个用惯了react 的人刚开始还有点不适应。但是毕竟胳膊拧不过大腿不是,还是赶紧想办法把。)

    但是有时候我们需要这个组件每次都重新生成dom 元素,每次都执行created() 函数。这时候就用到了vue中的key 属性。
    key属性和react 的key属性基本上是一样的(个人理解,如果有错误还请拍砖指正)。
    key 属性不是给开发人员用的,而是用来 给vue 元素渲染的时候用的,每次渲染的时候会去拿这个key 值做对比,如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素,否则保持上一次的元素状态。
    根据这个原理我们可以给key 直接绑定一个 时间戳
    废话说的太多了直接上代码吧

    //父组件

    <template>
        <div>
            <div>
                <h1>父级</h1>
                <button @click="handleLoad">点击重新加载子级</button>
            </div>
            <children :key="timer"></children>
        </div>
    </template>
    <script>
    import children from '@/components/parent/children'
    export default {
        name: 'parent',
        components: { children },
        data () {
            return {
                timer: ''
            }
        },
        methods: {
            handleLoad () {
                this.timer = new Date().getTime()
            }
        }
    }
    </script>
    

    // 子组件

    <template>
        <div>
            子级
        </div>
    </template>
    <script>
    export default {
        name: 'children',
        data () {
            return {}
        },
        created () {
            console.log('重新加载啦')
        }
    }
    </script>
    
    

    在这里插入图片描述
    每次点击的时候都会重新加载子组件 ,created() 生命周期函数每次都会执行,重新生成dom 元素。也省的用watch 去监听了!

    展开全文
  • 说说Vue.js组件 什么是组件组件Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML...
  • vue组件重新加载(刷新)

    千次阅读 2018-06-13 11:20:00
    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="isRouterAlive"/> </template> <script> ...
  • 主要介绍了解决vue 单文件组件中样式加载问题,文章末尾给大家补充介绍了vue单文件组件中样式的问题,需要的朋友可以参考下
  • vue每次点击弹框重新加载组件

    千次阅读 2020-09-08 09:17:06
    使用v-if="showIntercomGroup"控制,每次打开弹框都重新加载组件 <div v-if="showIntercomGroup"> <el-dialog title="选择 " class="el-dialogStyle" :visible.sync="showIntercomGroup" width="70%" ...
  • 主要为大家详细介绍了vue瀑布流组件实现上拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 远程js 组件加载 提示加载 (vue-... 一个vuejs加载组件。 View demo 查看演示 Download Source 下载源 安装 (Install) npm i @nulldreams/vue-loading npm i @nulldreams/vue-loading 如何使用 (How ...
  • 一个集成了下拉刷新上拉加载无限滚动加载Vue组件
  • 下面小编就为大家分享一篇vue 页面加载进度条组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue-cli监听组件加载完成的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式,需要的朋友参考下吧
  • 本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力.
  • vue动态加载组件

    千次阅读 2019-04-25 09:00:56
    参考网站 ... ... <button @click='add'>click me to add a component ... import component1 from './components/component1.vue' import component2 from './...那么父组件中的content变化时,就会动态加载组件
  • Vue异步加载组件(报错)

    千次阅读 2019-04-19 17:15:30
    异步加载组件: 报错:Syntax Error: Unexpected token (10:25) 8 | el: ‘#app’, 9 | components: { 10 | ‘example’: () => import(’./components/example’) | ^ 11 | } 1...
  • 主要给大家介绍了关于Vue动态组件和异步组件原理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue移动端列表组件,支持下拉刷新,上拉加载更多
  • 最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 案例: 首先是组件,创建四个组件...
  • 加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载组件加载 ,需要的朋友可以参考下
  • 开发vue延迟加载组件

    万次阅读 2018-03-16 14:00:14
    vue的单页面应用访问速度一般情况下已经很快了,...2、多数首次不显示的的dom元素,或者子组件加载时会调用ajax请求加载数据,这时候首次加载的请求可能有5个、10个甚至更多,这时候并发请求就会带来竞争,首次加载...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,646
精华内容 29,058
关键字:

vue重新加载组件

vue 订阅