Vue3.2经典总结

setup语法糖

不用导出变量, 内置导出.顶层绑定将自动暴露给模板.

不用使用name表示当前组件名字,vue 会依据它的文件名来自动推断组件名称。

不用注册组件,引入组件后可直接在模板使用.

不用给每个函数给出async, 该语法糖可以使用顶层 await

使用命令空间组件

index.vue 中
<script setup lang='ts'>
import * as Form from "../Components";
</script>

<template>
  <Form.Foo />
  <Form.Bar />
</template>

index.ts中 //  
import Foo from './Foo.vue';
import Bar from './Bar.vue';
export { Foo, Bar };

使用prop 传值

1.使用运行时声明（runtime declaration）

defineProps 运行时声明的基本用法如下，仅支持运行时的校验。

<script setup lang='ts'>
const props = defineProps({
foo: String,
bar: {
  type: Number,
  required: true
}
})
</script>

2.类型声明（type declaration）(推荐)

<script setup lang='ts'>
const props = defineProps<{
  foo?: string
  bar: number
}>()
</script>

3. props 的默认值 —— widthDefaults

interface duixian = {
	id: number
}
<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string,
  list?: duixian[],
}>(), {
  title: '给出默认值',
  list: () => [{ id: 3 }],
});
</script>

4. 子组件触发父组件方法

   运行时声明
   <script setup>
   const emit = defineEmits("clickpp");
   const clientParents = () => emit("clickpp", 'aaaaaaaaaa')
   </script>
   <template>
       <button type="button" @click="clientParents">触发父组件的方法</button>
   </template>
   
   类型声明式
   interface Click {
     id: string,
   }
   // 完美的类型检查
   // List.Basic 是基于 ts 自动扫描 types 文件夹以及 delcare namespace 自动导入的
   const emit = defineEmits<{
     (e: 'clickpp', data: Click): void,
   }>();
   const clientParents = () => emit('clickpp', { id: '1'});;
   
   

   < style > v-bind 新特性

   javascript使用css中的样式

   <script setup lang="ts">
   import { useCssModule } from "vue";
   const css = useCssModule();
   console.log(css);		// { blue: "_blue_13cse_5", red: "_red_13cse_2"}
   </script>
   
   <style module>
   .red {
     color: red;
   }
   .blue {
     color: blue;
   }
   </style>
   

   状态驱动的动态 CSS(极其为推荐)

   通过v-bind 修改样式

   <script setup lang="ts">
   import { ref } from "vue";
   const color = ref('red');
   setTimeout(() => color.value = 'green' , 2000);
   </script>
   <template>
       
     <p>hello</p>
   </template>
   
   <style scoped>
   p {
     color: v-bind(color);
   }
   </style>
   

   使用var关键字操作css

   /* 在父元素样式中定义一个值 */
   .component {
     --text-color: #080; /* header-color 并没有被设定 */
   }
   
   /* 在 component 的样式中使用它： */
   .component .text {
     color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
   }
   .component .header {
     color: var(--header-color, blue); /* 此处 color 被回退到 blue */
   }