vue基本组件开发模板

<template>
    <div class="vue-component-name">
        <!-- 请更改根节点 class 名称 -->
        <!-- ... -->
    </div>
</template>
<script setup lang="ts">
import { useTemplateRef, ref, reactive, computed, watch, watchEffect, onBeforeUnmount, onMounted } from 'vue';
import { *** } from '@erp/common';
import { *** } from '@erp/biz';
// 定义⼊参
interface Props {
    // ***
}
// 定义双向绑定的参数
const modelValue = defineModel<string>({ required: true })
// 获取⼊参
const props = withDefaults(defineProps<Props>(), {
    // *** 默认值 ***
});
// 定义向⽗组件传递了哪些事件
const emit = defineEmits(['ok', 'close']);

// 模板引用
const gridRef = useTemplateRef<VxeGridInstance>('grid');

// 声明响应式
const loading = ref(false);

// 定义数据模型 TODO
const model = reactive({
    // ...
    type: 1
})

// 定义计算属性 TODO
const isDisabled = computed(() => {
    return model.type === 1;
});

// 定义事件方法 TODO
const handleConfirm = () => {
    // ...
};

// 组件内部调用 TODO
function init() {
    // ...
}

// 监听
watch(() => loading.value, () => {
    // ... 监听内容
});

// 副作用
watchEffect(() => {
    // ...
});

// ------⽣命周期处理------
// 卸载前调用 TODO
onBeforeUnmount(() => {
    // 
})

// ⽣命周期处理 TODO
onMounted(() => {
    init();
});

// 定义组件实例提供了哪些⽅法 TODO
defineExpose({
    ok: callEvent.ok,
    close: callEvent.close,
});
</script>
<style lang="scss" scoped>
.vue-component-name {
    // 请更改类名 ... TODO
}
</style>