11月第二周

这是我第一次写实习收获，已经实习四个月了，还一次没写过，现在已经没那么小白了，所以打算整理一下之前所学，这次只是这一周的收获，不多，大多都是从带教和经理那里反馈的建议改进之后总结出的。期望坚持下去。

1.grid让子元素垂直水平居中的方法

display:grid;
place-items:center

display:grid;
justify-content:center;
align-items:center

2.||与??的区别

• ||针对前面是布尔值，只有前面为false时，包括 ' ',0,false,null,undefined,Nan,才会取到设定的默认值

• ? ?针对前面是空值，比如null和undefined

具体要看后端暂时不返回有效值的时候，返回是null还是' '

const a = {name:'lulu',age:15,sex:male,lover:null}

//这个时候||和??都可以
const luluLover = a?.lover || 'mu'
const luluLover = a?.lover ?? 'mu'
但如果是
const a = {name:'lulu',age:0,sex:male,lover:null}
const age = a?.age || 12
//不对了
const age = a?.age ?? 12 //因为0不是空值

3.el-autocomplete

今天项目经理提到我的一个表单输入交互问题，一个表单要素需要既可以输入也可以选择，我的方法是用el-select 因为他有一个属性是allow-create,当这个属性为真时，就可以先输入，之后选择框就有了包含输入内容的选择。这个属性的含义是新创建选择项

符合要求，但问题是：就算可以输入，但也必须要选择才算真正输入

所以这里我用到了el-autocomplete,自动补全输入框，文档有两个方法，一个是点击输入框时选项出来，一个是输入时，List出现，差别在于下面这个属性是否为真

:trigger-on-focus="false"

用了这个之后，无需选择，就可以输入成功，[具体内容](Autocomplete 自动补全输入框 | Element Plus)

4. 子组件与父组件方法通信

由于我的VUE基础薄弱，所以只能边做边学了。这里的通信是我在看前辈代码的时候学到的，defineExpose，defineModel，defineOptions方法。默认情况下，父组件和子组件通信方法是单向的，也就是父到子。

但有些情况下，父组件可能会用到子组件的方法，有些数据也是需要双向改变的。

• defneExpose:比如当父组件需要清空子组件的表单时，就需要现在子组件暴露重置这个方法，在在父组件引用子地方加个ref;

/父组件
    <FacilityEdit
      ref="facilityRef"
      :type="type"
      @close="dialogVisible = false"
    />

//子组件
const handleReset = () => {
  formRef.value?.resetFields()
}
defineExpose({ handleReset })

• defineOptions:定义组件选项，比如组件名，导航路由守卫，是否继承父组件属性

  //子组件
  defineOptions({ name: 'WPLayerAttr' })
  //父组件

• defineModel：双向绑定数据，让子也能传给爸，v-model也可以写在prop前面，这种实现方法其实有两种，还可以子在某一个行为发生后emit告诉夫需要更新。

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

5.用映射思想简化代码

在涉及到多个条件语句判断赋值的时候，我的带教建议我用创建对象，存储多个键值对的方式简化代码。

下面是我的蠢例子

const title = computed(() => {
  switch (type.value) {
    case 'detail':
      return '设施设备详情'
    case 'edit':
      return '编辑设施设备'
    case 'add':
      return '添加设施设备'
    default:
      return ''
  }
})

对象改进

const titleMap = {
  detail: '设施设备详情',
  edit: '编辑设施设备',
  add: '添加设施设备'
}
const getTitle = () => tiitleMap[type.value]

6.时间范围控件选择只到分

value-format是存储格式也就是传入给变量的格式；format(重点是改这个)是显示在输入框的格式。

<el-date-picker
 v-model="form.time"
 type="datetimerange"
 start-placeholder="开始日期"
 end-placeholder="结束日期"
 format="YYYY-MM-DD HH:mm"
 value-format="YYYY-MM-DD HH:mm"
/>