Vue Cli注入方法

淮城一只猫 奇淫技巧 阅读量 0 评论量 0

Cap1 使用

使用 Provide/Inject 在子组件注入一个方法,这个方法可以控制 router-view 的显示和隐藏,从而达到页面加载的效果。

首先在顶级组件里添加方法:

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

然后只需要在子组件注入这个方法可以实现:

<template>
  <div class="app-container"/>
</template>
 
<script>
export default {
  inject: ['reload'],
  methods: {
    reloadFunction() {
      this.reload();
    }
  }
};
</script>

同样可以利用该特性实现别的方法。

喵~
淮城一只猫
永远年轻,永远热泪盈眶!
Flutter Drawer 灰色状态栏解决
Flutter Drawer 灰色状态栏解决

在制作 Flutter App 新建一个抽屉的实例后,发现一个问题:打开抽屉发现状态栏是灰色的,主要抽屉头部我用图片展示,理想效果应该是抽屉头部图片偏移上面状态栏的高度。

5 分钟阅读
JavaScript Array.from 详解
JavaScript Array.from 详解

Array.from允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。

4 分钟阅读