2025-04-29 Day 8 ✅ 今天做了： 1、上午： 封装图片列表组件： 这个组件接受传入的图片列表，并展示 2.下午 完成了空间模块的前端开发， 由于之前的功能都是照着开发文档和视频敲的，有些功能还是不熟悉，打算自己重新做一遍，从0完成用户模块、图片模块、空间模块 ⏰ 明天计划：重写云图库 📚 学到的知识点： 1、梳理一下传参的方式 1）首先是路径传值 /addpicture?id=123，这种情况使用route.query?.id 来接受值 2）路由传值，在路由文件中定义path: '/picture/:id', props: true。 用props来接受id值。这种情况使用 const props = defineProps<{ id: string | number }>() 3）组件传值 在父组件中定义 <PictureList :dataList="dataList" :loading="loading" /> 在子组件中接收 //定义了父组件传递给当前组件的属性类型 interface Props { dataList: API.PictureVO[], loadint?: boolean } // withDefaults的第一个参数：defineProps 返回的对象，defineProps的类似是上面定义的Props // 第二个参数：一个包含默认值的对象 const props = withDefaults(defineProps<Props>(), { dataList: () => [], loading: false }) 2、为什么在script中要通过 props.title 和 props.description，来访问，在template中使用title就可以访问到了 - 在模板中直接访问 props： Vue 会自动将 props 绑定到模板的作用域中，所以你可以直接使用 title、description 等变量。 - 在 <script> 或 <script setup> 中访问 props： - 使用 <script setup> 时，defineProps 自动将 props 中的内容暴露给模板，因此你可以直接在模板中访问它们，而在 setup() 函数内部，你需要通过 props.title 来访问。 - 使用普通<script> 时，props 被挂载到组件实例上，所以需要通过 this.props 来访问。 3、e.stopPropagation()，用于阻止事件冒泡， 事件冒泡：当一个事件发生时，它首先会被触发的元素接收到，然后事件会“冒泡”到它的父元素、祖父元素，一直到最顶层的元素