vue局部刷新 (组件重载)

 

组件重载的运用是当组件的数据产生了变化之时,需要通过重载来实现组件页面的刷新,而不是重新刷新URL进行重新请求,也可以理解为是局部刷新

 

步骤:

1. 在父级页面通过绑定组件 :key 来实组件重载

2. data中定义key值

3. 在父级页面中接收 watch事件监听 或者 子传父数据 进行key值的改变

4. 只要 key 值发生了改变,那么组件就会重新刷新

 

代码:

<template>
  <div id="app">
    <!-- 通过绑定 :key来绑定组件重载 -->
    <TopBar :key="topbarkey"></TopBar>
  </div>
</template>
​
export default {
  data() {
    return {
      topbarkey: 0
    }},
methods: {
    //子传父事件 (@updatekey="updatekeyFn")
    updatekeyFn() {
      this.topbarkey++
    }},
​
watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        //解决第一次进入时会发送两次微信登陆请求的报错
        if (oldVal != "/") {
          console.log("路由地址发生了变化,准备更新topbar");
          this.topbarkey++
        }}
}},}