vue规范

script-setup 写法

第一部分

template

第二部分

script

一、import 的顺序, 依次按照下面的顺序。

提示

已经通过 eslint 规则规范

二、TS 类型声明

interface Props {
	/** 姓名 */
  name: string;
	/** 年龄 */
  age?: number;
}

interface Emits {
  /**
   * 删除事件
   * @param id - 删除项的id
   */
	(e: 'delete', id: number): void;
}

三、defineProps、defineEmits、withDefaults

• 定义属性，如：

const props = withDefaults(defineProps<Props>(), {
  age: 24
});

其中 name 是必须的属性，age 是可选属性，通过 withDefaults 添加默认值

• 定义 emit 事件

const emit = defineEmits<Emits>();

四、响应式 use 函数

有些 use 函数需要传入响应式的变量参数时，则书写在声明的变量下面。

const router = useRouter();
const route = useRoute();

/** dom引用 */
const domRef = ref<HTMLElement | null>(null);
const { height: domRefHeight } = useElementSize(domRef); // 获取domRef的响应式高度

五、变量、函数声明

六、watch、nextTick、vue 生命周期函数

七、defineExpose

Contributors

作者:Long Mo

字数统计:224 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！