欣农实习日记 6.9

知识点一：Vue 中的 $event

作用一：获取原生 DOM 事件的事件对象

在 DOM 事件的回调函数中，传入参数 $event，可以获取到该事件的事件对象

作用二：事件注册所传的参数（子组件向父组件传值）

在子组件中，通过 $emit 注册事件，将数据作为参数传入(子组件中的)，在父组件中通过 $event 接收

// 父组件
<template>
    <div v-for="item in formList">
        <customInput @modelChange="modelChange(item, $event)" />
    </div>
</template>

<script>
import Hello from '@/components/Hello.vue'
export default {
    components: { Hello },
    methods:{
        // 当日龄修改时，绑定开始日期也做对应更改
        modelChange(item, val) {
        // item 是父组件当前循环的元素， val 是子组件传入的数据
            if (item.key == 'days' && this.propertyJudge(0, ['staData', 'days'])) {
                let nowDate = new Date(); // 获取当前时间
                let staData = nowDate - val * 24 * 3600 * 1000; // 修改后的日龄对应的开始日期
                this.formObj.staData = moment(staData).format('YYYY-MM-DD');
            }
        }
    }
}
</script>

// 子组件
<template>
    <input @input="valueChange($event)" />
    <!-- $emit()的第一个参数是定义的事件名，第二个参数是要传入的数据 -->
</template>

<script>
export default {
    methods:{
        valueChange(e) {
          let val = e.target.value.trim();
          // $emit()的第一个参数是定义的事件名，第二个参数是要传入的数据
          this.$emit('modelChange', val);
        },
    }  
}
</script>

• 这里父组件的 $event 对应作用二，子组件的 $event 对应作用一
• DOM 原生事件 input 框内的当前值，可以通过 .target.value 获得

知识点二：Data对象 时间戳转为对应日期格式

方法一：使用原生js

function (data) {
  var date = new Date(data)
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
  var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
  return Y + M + D + h + m + s
}

另外一种补0的方法：字符串方法 -- padStart()

与之相对的方法是 padEnd()

const timestamp = 1623477396; // 假设这是您要获取的时间戳 
const date = new Date(timestamp * 1000); // 将时间戳转换为 Date 对象 

const minutes = date.getMinutes(); // 获取分钟数，返回值范围为 0 - 59 （整数类型）
const seconds = date.getSeconds(); // 获取秒数，返回值范围为 0 - 59 （整数类型）

const formattedMinutes = String(minutes).padStart(2, '0'); // 将分钟数转换为两位字符串
const formattedSeconds = String(seconds).padStart(2, '0'); // 将秒数转换为两位字符串

console.log(`${formattedMinutes}:${formattedSeconds}`); // 打印格式化后的结果，例如 "03:21"

方法二：使用 moment 库

知识点三：查找对象数组中是否存在某一对象

方法一：通过 Array.property.find()（常用）

当然用其他遍历方法也可以

let flag = this.formRules[0].list.find((item) => {
    return item.key == 'deviceId'; 
});
// 返回这个对象元素

if (!flag) {
    ...
}

方法二：通过 JSON.stringify

先把整个对象数组转为字符串的形式，然后通过字符串的搜索方法，查找是否包含字串

if (JSON.stringify(this.formRules[0].list).indexOf('deviceId') === -1) {
    ...
}

知识点四：什么是跨域？怎么解决跨域？

// 待了解