关于前端:Vue3第6课Vue3中模块化介绍作一个时间更新模块

40次阅读

共计 1692 个字符，预计需要花费 5 分钟才能阅读完成。

咱们晓得当程序有肯定的可重用性时，在 vue2 中咱们会应用 mixins, 然而在 vue3 中没有了。那咱们先 vue3 中怎么实现相似的性能了。

明确需要，咱们心愿有提供一个工夫与调用工夫的办法给多个组件应用。咱们先新建一个 Time.vue 组件

<template>
  <div class="time">
 <button @click="getNowTime"> 获取工夫 </button>
 <div>{{nowTime}}</div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs, watch} from "vue";

export default defineComponent({
  name: "about",
  setup() {const nowTime = ref("00:00:00");
 const getNowTime = () => {const now = new Date();
   const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
   const min =
     now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
   const sec =
     now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
   nowTime.value = hour + ":" + min + ":" + sec;
   setTimeout(getNowTime, 1000);
 };
 return {
   nowTime,
   getNowTime,
 };
  },
  components: {},});
</script>
<style lang="scss" scoped>
.about {margin-top: 80px;}
</style>

当咱们点击“获取工夫”按钮后

获取了以后工夫，并 1 秒钟刷新一次，曾经能够失常运行了。那咱们想在多个组件中应用这个工夫跟办法该如果实现了。

模块化
新建一个 hooks 文件夹并新建一个 time.ts 文件
把相干代码写在 time.ts 中，并 export 进来

import {ref} from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {const now = new Date();
  const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
  const min =
    now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
  const sec =
    now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
  nowTime.value = hour + ":" + min + ":" + sec;
  setTimeout(getNowTime, 1000);
};
export {nowTime, getNowTime}

在须要应用的组件中援用

<template>
  <div class="time">
    <button @click="getNowTime"> 获取工夫 </button>
    <div>{{nowTime}}</div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {nowTime, getNowTime} from "@/hooks/time";

export default defineComponent({
  name: "about",
  setup() {
    return {
      // 这里还须要 return，切记不能遗记
      nowTime,
      getNowTime,
    };
  },
  components: {},});
</script>
<style lang="scss" scoped>
.about {margin-top: 80px;}
</style>

程序仍然失常运行

正文完