2.1 组件引⼊
之前的写法
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWord from '@/components/HelloWord.vue';
export default defineComponent({
name: 'Home',
components:{
HelloWord
}
});
</script>
现在的写法
<script setup lang="ts">
import HelloWord from '@/components/HelloWord.vue'; //不⽤注册,引⼊即注册
</script>
2.2 定义组件的 props
<script setup lang="ts">
import { ref,defineProps } from 'vue'
type Props={
msg:string
}
defineProps<Props>();
</script>
2.3 定义响应变量、函数、监听、计算属性…
<script setup lang="ts">
import { ref,computed,watchEffect } from 'vue'
const count = ref(0); //不⽤ return ,直接在 templete 中使⽤
const addCount=()=>{ //定义函数,使⽤同上
count.value++;
}