Vue3.x 模块化部件
Vue3.x版本最大的一个提升,就是有更好的重用机制,你可以把任何你想独立的模块独立出去。比如加一个显示当前时间的功能(例如:17:30:20)。并且这个功能要在不同的页面进行反复调用。
使用Vue2.x的版本,一定会使用mixins
,但是Vue3.x,肯定就不用这个啦
我将会写两个小案例来说明一下这个
获取当前时间
不重用方法
先来看不重用的写法,也就是我们把程序直接写在App.vue
这个组件里。这里你可以先顶一个ref
变量nowTime
,然后通过getNowTime
的方法,让他可以显示并一直更新当前时间。最后在return
里返回这个变量和方法。
<template>
<div>
<div>{{ nowTime }}</div>
<div><button @click="getNowTime">显示时间</button></div>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
const app = {
name: "App",
setup() {
//.....
const nowTime = ref("00:00:00");
const getNowTime = () => {
const now = new Date();
const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
const minu =now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
const sec =now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
nowTime.value = hour + ":" + minu + ":" + sec;
setTimeout(getNowTime, 1000); //每一秒执行一次这个方法
};
return {
nowTime,
getNowTime,
};
},
};
export default app;
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
独立模块
当然这个时候如果你需要在其他页面也显示的话,一直复制黏贴,在后期非常不利,也是一种不好的代码编写方式
那么可以将上面的功能变成一个模块,mkdir src/hooks/useTime.ts
建立文件,将上面的东西修改修改复制进入ts中,那么结果就是这样的
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 minu =
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
const sec =
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
nowTime.value = hour + ":" + minu + ":" + sec;
setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime }
需要注意的是,你需要在代码的最前面用import
进行引入ref
,在最后用export
的方式,导出nowTime
和getNowTime
.
引入模块
import { nowTime, getNowTime } from "./hooks/useNowTime";
return {nowTime,getNowTime};
现在可以看出这种方式,比vue2中要好很多,不用再使用mixins要好很多。我觉着这个算是Vue3.x一个非常重要的改进
显示Girls图片
独立模块
这里我们使用axios
来进行远程随机获得图片,但是我们这里作的不是远程随机获得图片,而是模块化
一个通用的远程调用API的组件
,这个组件可以远程请求一个指定的URL,并且返回
所得到的值。 先用npm
的方式安装axios
.
npm install axios --save
新建一个文件,叫做useURLAxios.ts
,然后先引入ref
和axios
.在文件里写一个useUrlAxios
方法,在方法里声明四个响应式变量result
、loading
、loaded
和error
。声明好后,使用axios
进行访问远程链接。最后记得要进行return
和export default
。
import { ref } from 'vue'
import axios from 'axios'
function useUrlAxios(url: string) {
const result = ref(null)
const loading = ref(true)
const loaded = ref(false)
const error = ref(null)
axios.get(url).then((res) => {
loading.value = false
loaded.value = true
result.value = res.data
}).catch(e => {
error.value = e
loading.value = false
})
return {
result,
loading,
loaded,
error
}
}
export default useUrlAxios
App.vue
回到App.vue
,引入刚刚我们所写的部件,并记得return
<template>
<div>
<h2>欢迎光临红浪漫洗浴中心</h2>
<div>随机选择一位美女为你服务</div>
<div v-if="loading">Loading.....</div>
<img v-if="loaded" :src="result.message" />
<div></div>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
import useUrlAxios from "./hooks/useUrlAxios";
const app = {
name: "App",
setup() {
const { result, loading, loaded } = useUrlAxios(
"你的Url"
);
return { result, loading, loaded };
},
};
export default app;
</script>
修改你的Url
为地址即可(需要返回的是json格式