vite2+ts+vue3项目创建（三）

• vite中可以使用script setup语法糖，vscode有Volar扩展来适配vue3的语法，需要禁用掉Vetur；
• vite使用script setup语法糖
  1).属性、方法无需返回

<template>
<div @click="changeNum">{{num}}</div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
let num = ref(10);
let changeNum = ():number=>num.value++
</script>

2). 组件引用，不需再次注册，直接引入后直接使用

<template>
<Child></Child>
</template>

<script setup>
import Child from '@/components/child';
</script>

3).父子组件传值

// 父组件
<template>
    <Child @child-click="handlerClick" />
</template>

<script setup>
import Child from './child.vue';
const handlerClick= (str) => {
  console.log(str);
}
</script>


// 子组件
<template>
  <button @click="handleClick">按钮</button>
</template>

<script setup>
import { defineProps, defineEmit } from 'vue'
const emit = defineEmit(['child-click'])
const handleClick = () => {
  emit('child-click', '子组件点击事件')
}
</script>