欣农实习日记 5.17

163 阅读3分钟

任务

任务一

内容: 修复昨天新增“猪舍”字段的 bug

实现: 具体实现记录在 5.16 日记中

任务二

内容: 修改 欣牧云 移动端 ui bug

总结:

1. defineProps 定义一个类型为对象,默认值为空的属性

在 Vue.js 3 中,要定义一个类型为对象,默认值为空的 props 属性,可以使用 defineProps 函数。示例代码如下:

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    myProp: {
      type: Object,
      default: () => ({})
    }
  })
})

在这个示例中,我们通过 defineProps 函数来定义了一个名为 myProp 的 props 属性,并指定了它的类型为 Object,默认值为一个空的对象 literal {}

注意:

在设置默认值时,需要使用函数并返回一个新的空对象,而不是使用对象字面量 { },这是因为对象字面量 { } 在多个组件之间共享,可能会造成状态污染,而函数返回一个新的对象,则可以保证每个组件都拥有自己独立的默认值。

但是: 这里的默认值写成 null 的区别是什么呢?

在 Vue.js 3 中,将默认值设置为 {}null 的区别主要体现在在父组件未传递此 prop 属性时的行为不同。

  • 如果将类型为对象的 props 属性的默认值设置为 {},则即使父组件未给该属性传递值,子组件也会生成一个新的空对象作为该属性的值。这意味着当父组件对该属性进行修改时,不会影响到子组件内部的属性值。

  • 而如果将该属性的默认值设置为 null,则当父组件未传递该值时,子组件的该属性值会被设置为 null,这意味着子组件内部的该属性值实际上是来自于父组件。如果父组件后续对该属性进行修改,则子组件内部的该属性值也会随之变化。(也有原因是因为如果默认值设为 null,当使用这个对象中的属性时,如 style.width,会报错,因为 null 不能 .

  • 因此,在使用类型为对象的 props 属性时,需要根据实际需求来选择合适的默认值。如果想保持编程模型的一致性并确保子组件内部的属性值不受外部影响,则可以选择将默认值设置为 {}。如果希望子组件内部的属性值与父组件共享,并随着父组件的修改而变化,则可以选择将默认值设置为 null

image.png

2. vue3中的 CSS 深度选择器 -- :deep()

处于 scoped 样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep() 这个伪类:

即: 我们在父组件中,如果想对子组件中的样式进行修改,但是又不方便直接修改子组件,因为可能会导致其他使用这个组件的父组件产生问题,此时就可以使用深度选择器,来覆盖子组件的样式。

image.png
  • 参数:直接填子组件中的选择器名称

3. 使用 transform: scale(0.5) 后,虽然元素的内容缩小了,但实际占用空间并没有变化

  • transform 是不会引起重排的,也就是说对元素进行缩放等操作不会影响到其他元素的布局,这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间,那就用zoom做缩放。

解决方法:

  1. 加上属性 transform-origin: left top,缩放后的顶点对齐方式(但还是会占据原有空间)
  2. 改用 zoom: 0.5,实际占用的空间会发生改变

4. flex 布局

...