vue @hook/is的用法

自己做个记录，会持续更新
1、@hook

<script>
  export default {
    mounted() {
      this.timer = setInterval(() => { ... }, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer);)
    }
  };
</script>

监听子组件生命周期，对任意的组件都有效果，包括引入的第三方组件。

<v-chart
    @hook:mounted="loading = false"
    @hook:beforeUpdated="loading = true"
    @hook:updated="loading = false"
    :data="data"
/>

2、vue中is的用法

 <div :is="currentView" @value="change" :listData="listData"></div>//currentView是组件的变量名

import basic from "./basic";
import attendance from "./attendance";
import certificata from "./certificate";
import appendix from "./appendix";
import appendixList from "./appendixList";

components: {
    basic,
    attendance,
    certificata,
    appendix,
    appendixList
  },

data（）{
	currentView: "basic",//可以通过修改currentView切换展示的组件
}

3、全局注册组件
应用场景：后台管理系统，分页组件
main.js

import Pagination from "@/components/Pagination";
Vue.component('Pagination', Pagination);

使用的时候可以直接用，不用再次引入