Vue-Ant Design Pro of Vue-配置App.vue通过router-view组件实现局部刷新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gu_wen_jie/article/details/90480617

项目实际开发中,很多地方经常需要一些局部刷新功能。如:创建后返回列表,修改后返回列表,局部操作刷新…
如何简洁有效的实现局部刷新呢,在Ant Design Pro of Vue中,我们可以通过router-view组件来定义一个属性来实现局部刷新。并且在入口文件配置后,可以在项目任何地方使用,非常方便。

Ant Design Pro of Vue-入口App.vue

下载好Ant Design Pro of Vue框架后,入口代码如下:

<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-locale-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { AppDeviceEnquire } from '@/utils/mixin'

export default {
  mixins: [AppDeviceEnquire],
  data () {
    return {
      locale: zhCN
    }
  },
  mounted () {

  }
}
</script>
<style>
  #app {
    height: 100%;
  }
</style>

修改配置后

我直接贴出来修改后的代码,通过定义一个 isRouterAlive属性来实现

<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <router-view v-if="isRouterAlive"/>
    </div>
  </a-locale-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'

export default {
  provide () {
      return {
          reload: this.reload
      }
  },
  data () {
    return {
      locale: zhCN,
      isRouterAlive: true
    }
  },
    methods: {
      reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
              this.isRouterAlive = true
          })
      }
    },
  mounted () {
    const { $store } = this
    deviceEnquire(deviceType => {
      switch (deviceType) {
        case DEVICE_TYPE.DESKTOP:
          $store.commit('TOGGLE_DEVICE', 'desktop')
          $store.dispatch('setSidebar', true)
          break
        case DEVICE_TYPE.TABLET:
          $store.commit('TOGGLE_DEVICE', 'tablet')
          $store.dispatch('setSidebar', false)
          break
        case DEVICE_TYPE.MOBILE:
        default:
          $store.commit('TOGGLE_DEVICE', 'mobile')
          $store.dispatch('setSidebar', true)
          break
      }
    })
  }
}
</script>
<style>
  #app {
    height: 100%;
  }
</style>

使用

如何在某个组建中来使用呢?例:
现在有个重置按钮,要求点击重置按钮列表刷新,可以这样写

<script>
    export default {
        name: 'TableList',
        components: {
        },
        inject: ['reload'],
        data () {
            return {
                }
        },  
        methods: {
            reset () {
                this.form.resetFields()
                this.reload()
            }
        },
        ...
        ...
</script>      

看上面代码,我们通过在当前子组件中通过inject来注入变量,你可以在入口也就是父组件中看到我们通过

provide () {
      return {
          reload: this.reload
      }
  },

来提供了变量reload,所以我们可以在这里注入使用,然后在methods中通过this.reload()来达到局部刷新。
注意:
这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。只要在父组件中调用了提供了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

展开阅读全文

没有更多推荐了,返回首页