Element-UI记录 - 技术栈

1，ref

html 复制代码

   <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="90px"
      label-position="left"
    >

el-form相当于QTreeWidget，ref相当于QTreeWidget *treeWidget，即UI控件（组件）的实例（指针），通过ref，可以调用组件的方法，比如formRef.value.validate()等，相当于通过treeWidget可以调用QTreeWidget的方法：tree->setColumnCount(3);

2，defineProps

javascript 复制代码

const props = defineProps<{
  sourceNodeId?: number; 
}>();

defineProps 是 Vue 3 中用于声明组件属性 的方法，专门用来接收父组件传递过来的参数。props：是一个响应式对象，包含所有父组件传递的属性值。

父组件传递参数：

html 复制代码

<template>
  <!-- 父组件传递 sourceNodeId 参数 -->
  <MyDialog 
    v-model="dialogVisible" 
    :source-node-id="123"
  />
</template>

命名规范

注意属性名的转换：

父组件中使用 kebab-case （短横线命名）：source-node-id
子组件中使用 camelCase （驼峰命名）：props.sourceNodeId

Vue 会自动处理这种命名转换。

3，组件的v-model

v-model 的数据类型确实是由组件本身定义的。比如我自己的一个dialog叫MyDialog：

html 复制代码

<template>
  <el-dialog
    v-model="visible"
    ...
    ...

>

/* 脚本部分 */
const visible = defineModel<boolean>();

明确指定 v-model 是 boolean 类型，组件内部需要自己维护v-model的值的变化，比如点了取消按钮，设置visible为false：

javascript 复制代码

const handleCancel = () => {
  visible.value = false;  // 子组件修改值，父组件会同步更新
};

el-dialog 组件本身要求 v-model 必须是 boolean 类型，这个boolean类型就是显示/隐藏的控制变量，内部的类似逻辑是这样的：

javascript 复制代码

// el-dialog 内部伪代码
const modelValue = defineModel<boolean>();

// 监听值变化，自动执行显示/隐藏
watch(modelValue, (newVal) => {
  if (newVal) {
    this.show();      // 显示对话框
  } else {
    this.hide();      // 隐藏对话框
  }
});

这里的MyDialog使用了el-dialog，因此需要给el-dialog设置v-model为bool类型，MyDialog可以设置自己的model类型，但是给el-dialog的model必须是boolean，比如：

javascript 复制代码

// MyDialog 内部
const model = defineModel<{ visible: boolean; data: any }>();

// 需要手动处理显示逻辑
const dialogVisible = computed(() => model.value?.visible ?? false);

html 复制代码

<!-- MyDialog 模板 -->
<el-dialog v-model="dialogVisible">  <!-- 最终还是 boolean -->