前言

前段时间因为一些特殊原因，我换组了，也就是换部门，不过都是开发工作。当我开始参与新的团队开发工作时，发现了一个让我比较头秃的事情，我的部分代码风格竟然和他们有较大的差别。目前属于第二种风格，有可能俺见识少，考虑的不多，所以今天分享一下两种风格的写法，也希望能和大家交流交流。

代码风格例子

下面只是大致的对两种风格举个例子，不涉及业务

风格一

风格一的思路主要是通过父组件传参，子组件通过监听props值来打开对话框

父组件代码

<template>
    <el-button @click="open">打开</el-button>
    <formDialog v-model="visible"></formDialog>
</template>
<script setup lang="ts">
import formDialog from '@/views/test/form2.vue';

const visible = ref<boolean>(false);

function open() {
    // 通过父组件传参的方式通知子组件
    visible.value = true;
}

子组件代码

<template>
    <el-dialog v-model="visible">
        <el-form ref="formRef" :model="form">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.userName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" clearable placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        modelValue: boolean;
    }>(),
    { modelValue: false }
);

interface userInfo {
    userName: string;
    password: string;
}

// 也可以换成计算属性
watch(
    () => props.modelValue,
    (val) => {
        visible.value = val;
    }
);

const visible = ref<boolean>(false);

const form = ref<userInfo>({ userName: '', password: '' });

风格二

风格二的思路主要是通过子组件暴露的api进行打开对话框

父组件代码

<template>
    <el-button @click="open">打开</el-button>
    <formDialog ref="formDialogRef"></formDialog>
</template>
<script setup lang="ts">
import formDialog from '@/views/test/form-dialog.vue';

const formDialogRef = ref<InstanceType<typeof formDialog>>();

function open() {
    // 通过调用父组件暴露出来的open api打开组件
    formDialogRef.value?.open();
}
</script>

子组件代码

<template>
    <el-dialog v-model="visible">
        <el-form ref="formRef" :model="form">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.userName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" clearable placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
interface userInfo {
    userName: string;
    password: string;
}

const visible = ref<boolean>(false);

const form = ref<userInfo>({ userName: '', password: '' });

function open(): void {
    visible.value = true;
}

defineExpose({ open });
</script>

客串产品经理、销售的角色

当我在思考两种风格的区别之时，我陷入了另一个思考，当我们在编写组件并且思考时，那么此时的我们是不是已经是个产品经理了，客串组件产品经理。我们开发组件初期，我们可以代入产品经理的角色，组件就是产品，我们如何设计能让客户接受，让客户用起来方便，且容易扩展。当我们在使用别人开发的组件时，我们是不是也可以理解为我们是客户。经过一番歪理，我们即客串当了产品经理，也客串当了客户。

总结

个人认为如果只是单单写业务组件的话，功能完成度是一样的时，大多数业务我们都在组件内部做了，我们把对话框的开启和关闭功能放在组件内部，对外只是暴露一个可以打开的api，当然也可以暴露关闭的api，按需索取，即方便使用也方便扩展。使用组件的人只需要会简单的api以及在外部写少量的代码即可达到复用效果。