vue中使用[provide/inject],实现页面强制刷新(并非闪一下再刷新)

代码

父组件

provide 直接放在export 层级里面

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

methods中添加reload方法,

data中定义flag,如果需要此组件默认显示则为true,否则为false,
在引入的子组件上添加v-if=“flag”

    reload(){
      this.flag = false;
      this.$nextTick(function () {
        this.flag = true
      })
    },

子组件代码

export default 层级中添加
inject: [‘reload’],
在dom最顶一层的div上(非template)添加flag判断,如:v-if=“flag”
data中定义: flag: true

原理

主要是通过一个属性的相反值进行组件加载
通过inject和provide使子组件不仅可以访问父组件,还可以访问到祖先级组件

你可能感兴趣的:(Vue.js,vue.js,javascript)