之前的代码:
//defineComponent()是为了给里面的对象添加类型,服务于TS而存在的
export default defineComponent({//选项式写法
name: "HelloWorld",
props: {
msg: String,
},
setup() {
const { result, loaded, loading } = useURLLoader<dogtype>(
"https://dog.ceo/api/breeds/image/random"
);
return { //删了,不再需要return
result,
loaded,
loading,
};
},
});
改写后的代码:
<script lang="ts" setup>
import { defineProps } from "vue";
import useURLLoader from "@/hooks/useURLLoader";
interface dogtype {
message : string;
status: string;
}
const { result, loaded, loading } = useURLLoader<dogtype>(
"https://dog.ceo/api/breeds/image/random"
);
const props = defineProps({
msg:String
})
</script>
<script lang="ts">//使用了setup语法糖后就要再弄一个script标签来定义name
export default{
name:"HelloWorld"
}
</script>
原来的写法:
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
});
新写法:
不再需要声明组件,引入后直接用
<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue';
</script>