getList() { this.loading = true // 结果赋值给this.dataList listDishByPage(this.queryParams).then((response) => { this.dataList = response.data.list this.loading = false this.total = response.data.total } ) }<el-table-column label="编号" align="center" prop="dishNo" /> <el-table-column label="名称" align="center" prop="dishName" /> <el-table-column label="价格" align="center" prop="price" /> <el-table-column label="图片" align="center" prop="fileUrl" /> <el-table-column label="口味" align="center" prop="flavor" /> <el-table-column label="原材料" align="center" prop="ingredients" /> <el-table-column label="烹饪方式" align="center" prop="cookingMethod" />其中后端返回的image为文件名，需要调用selectByFileName，传入image参数，返回fileUrl，要怎么写

时间: 2023-08-20 22:06:02 浏览: 114

Vue.js 3.X开发经验及技巧汇总

### Vue.js 3.X 开发经验及技巧汇总在 Vue.js 3.x 的开发过程中，开发者往往会遇到一些常见的问题和需求，例如如何高效地管理组件、如何优化数据响应机制等。本文将根据提供的部分文件内容，详细介绍几个重要的知识点及其应用场景。 #### 1. 使用 `require.context()` 管理多个组件 ##### 场景与问题当一个页面需要引入多个组件时，传统的写法是逐一导入每个组件，这种做法会导致大量的重复代码。例如： ```javascript import titleCom from '@/components/home/titleCom'; import bannerCom from '@/components/home/bannerCom'; import cellCom from '@/components/home/cellCom'; export default { components: { titleCom, bannerCom, cellCom } }; ``` 这种方法不仅冗余，而且当页面组件增多时，维护起来会变得十分困难。 ##### 解决方案利用 `require.context` 可以有效简化这一过程。`require.context` 实际上是 Webpack 提供的一个API，它允许动态加载模块。使用方法如下： ```javascript const path = require('path'); const files = require.context('@/components/home', false, /\.vue$/); const modules = {}; files.keys().forEach(key => { const name = path.basename(key, '.vue'); modules[name] = files(key).default || files(key); }); export default { components: modules }; ``` 这样，无论页面需要引入多少组件，都可以通过这段代码自动完成组件的注册，大大减少了重复的工作量。 ##### API 参数详解 - **directory**: 需要检索的目录。 - **useSubdirectories**: 是否检索子目录，默认为false。 - **regExp**: 匹配文件的正则表达式，通常用于指定文件扩展名，如 `.vue` 文件。 #### 2. `watch` 监听器的高级应用 ##### 常用用法 `watch` 监听器主要用于监听数据变化并执行相应的回调。例如，初始渲染时调用接口获取列表数据，当输入框发生变化时重新查询： ```javascript export default { created() { this.getList(); }, watch: { inpVal(val) { this.getList(val); } } }; ``` ##### 立即执行可以通过 `immediate` 属性使监听器立即执行一次，这通常用于组件初始化时就需要执行某些操作的情况： ```javascript export default { watch: { inpVal: { handler: 'getList', immediate: true } } }; ``` ##### 深度监听对于复杂的数据结构（如对象或数组），普通的 `watch` 监听器无法感知内部属性的变化。此时可以使用 `deep` 属性开启深度监听： ```javascript export default { watch: { inpValObj: { handler(oldVal, newVal) { console.log(oldVal); // 注意：oldVal 和 newVal 指向的是同一个引用 console.log(newVal); }, deep: true } } }; ``` 需要注意的是，即使开启了深度监听，也无法直接获取到具体的哪个属性发生了变化，因为 Vue 不会保留修改前的值副本。 #### 3. 组件间的通信方式 Vue.js 提供了多种组件间通信的方式，适用于不同的场景。 ##### 3.1 Props 父组件向子组件传递数据 Props 是 Vue 中实现父子组件通信最常用的方式之一。Props 的值可以是一个数组或对象形式： - **数组形式**：简单但不推荐，因为它无法提供类型检查等特性。 - **对象形式**：更灵活，可以设置类型、默认值、验证函数等。示例代码： ```javascript export default { props: { myProp: { type: String, // 限定类型 required: true, // 必填 default: 'default value', // 默认值 validator: function (value) { return ['success', 'warning', 'danger'].includes(value); } // 验证函数 } } }; ``` ##### 3.2 `$emit` 子组件触发父组件的自定义事件子组件可以通过 `$emit` 触发父组件定义的事件，这种方式实现了子组件向父组件的信息传递。示例代码： **父组件：** ```html <child-component @custom-event="handleEvent"></child-component> ``` **子组件：** ```javascript methods: { sendData() { this.$emit('custom-event', { message: 'Hello from child!' }); } } ``` ##### 3.3 Vuex 状态管理对于大型应用而言，单一职责原则和状态集中管理变得尤为重要。Vuex 作为 Vue 的官方状态管理库，提供了集中式的状态管理方案，适用于数据共享较多的应用场景。 - **state**：存储数据的仓库，可以通过 `this.$store.state` 或 `mapState` 访问。 - **getters**：类似于 state 的计算属性，可以通过 `this.$store.getters` 或 `mapGetters` 访问。 - **mutations**：用于同步更新 state 的方法，确保状态更新的可预测性。 - **actions**：处理异步逻辑，可以触发 mutations 更新状态。 Vue.js 3.x 提供了许多强大的工具和特性来帮助开发者更高效地开发应用。通过合理运用这些技术，可以极大地提高开发效率并优化用户体验。

你可以在 getList() 方法中，在获取到菜品列表数据后，对每个菜品的 image 字段调用 selectByFileName() 方法，将其替换为返回的 fileUrl，例如： ``` getList() { this.loading = true; listDishByPage(this.queryParams).then((response) => { this.dataList = response.data.list; this.loading = false; this.total = response.data.total; this.dataList.forEach((dish) => { selectByFileName(dish.image).then((url) => { dish.fileUrl = url; }); }); }); } ``` 这个方法首先将 loading 状态设为 true，然后调用菜品列表接口，获取菜品列表数据。当数据返回后，将 loading 状态设为 false，并将列表数据和总数分别赋值给 this.dataList 和 this.total。接着，对于每个菜品，都调用 selectByFileName() 方法，将其 image 字段替换为返回的 fileUrl。最后，将处理好的列表数据渲染到 el-table 中。

阅读全文

相关推荐

对Django 中request.get和request.post的区别详解

vue.js表格分页示例

getList(page, fenlei, ref = '') { if(fenlei == '全部') this.swiperIndex = -1; for(let i=0;i<this.fenlei.length;i++) { if(fenlei == this.fenlei[i]) { this.swiperIndex = i; break; } } this.curFenlei = fenlei; if (this.curFenlei == '全部') { this.isPlain = false; } else { this.isPlain = true; }

const btnClick = ({ params }) => { if (params.state === '1') { params.state = true } else if (params.state === '0') { params.state = false } pagination.page = 1 Object.assign(searchParams, params) getList() }

给你一个jingqsdfgnvsdljk

最新推荐

给你一个jingqsdfgnvsdljk

MPSK调制解调MATLAB仿真源代码

一个基于Java SE的跳跃忍者游戏.zip

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径