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;
/父组件<FacilityEditref="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-pickerv-model="form.time"type="datetimerange"start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY-MM-DD HH:mm"value-format="YYYY-MM-DD HH:mm"
/>