vue3.0规范学习记录-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3.0规范学习记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组合式函数使用use+name进行命名，例如useMouse；
自定义指令使用v + name进行命名，例如vFocus；
在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’, params)触发更新；
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时.
对于结合单文件组件使用的组合式 API，推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。
通过PascalCase（大驼峰）格式引入组件，模板也使用PascalCase（大驼峰）；
```
import MyInput from '../component/MyInput.vue'
// 模板
<MyInput />
```
defineProps 和 defineEmits 都是只能在<script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉;

单文件组件<script setup>语法，接收props值：

非TS组件：props接收参数时使用defineProps，如下：

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "张三"
  },
  labels: {
    type: Array,
    default: () => ["姓名", "年龄"]
  }
});
</script>

<template>
  <div>{{ props.name }}</div>
  <div>{{ props.labels }}</div>
</template>

TS组件：使用接口 + defineProps声明，如需设置默认值，使用withDefaults编译器宏，如下：

interface Props {
	msg: string,
	labels?: string []
}
const props = withDefaults(defineProps<Props>(), {
	msg: "特点",
	labels: () => ["上进", "应变能力不错"]
})

单文件组件<script setup>语法，声明emit事件：文章来源地址https://www.toymoban.com/news/detail-818404.html

非TS：使用defineEmits声明，如下：

const emits = defineEmits(["input", "change"])
emits('input')

TS：使用接口+defineEmits声明，如下：

interface Emits {
	(e: 'change', id: number): void,
	(e: 'update', value: string): void
}
const emits = defineEmits<Emits>()
emits('change', 1)

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()