系列文章

【Vue】vue增加导航标签
本文链接：https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue，在Windows IIS平台部署
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程（解决npm下依赖包版本冲突）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程（详细）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】日期格式化（全局）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格，导出Excel
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135018489

【Vue】el-date-picker日期范围组件（本周、本月、上周）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135088143

【前端】前后端通信方法与差异
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135153985

---

---

前言

本专栏为 前端【Vue】专栏，主要介绍Vue知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。
这里普及一个知识：HTML已不仅仅只能开发 Web，也可以开发移动端（Android、iOS），所以本专栏也会介绍 移动端的开发。
我个人将移动端开发，分为两大方向：

①原生开发
最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐，对开发人员技术要求高。

②混合开发（加壳方式）
当前热门，使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式，使用 vue.js、node.js、Angular.js、React.js、api.js等框架开发。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术进行 界面渲染样式丰富、屏幕适配（栅格技术自适应）效果好。但缺点就是对底层硬件调用库尚不完善，有时候会发生异常，对框架依赖较高，不过库在不断完善中，主要的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支，它基于标准 HTML、CSS 和 JavaScript 构建，学习Vue不可以速成，得先熟悉网页三剑客（HTML、CSS和JavaScript）。Vue是一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

一、技术介绍

本文基于elementUI el-select 组件，进行二次封装，做成了子组件，可以在自己的项目中使用。
为什么这样做？那是因为我在使用 change事件时，效果不理想，无法触发在值改变后，向父组件传输参数。

这里用到以下技术：

1、父组件向子组件传参
2、子组件向父组件传参
3、watch监听，参数变化
4、生命周期（节点）钩子：created() 、 mounted() 。

二、项目源码

2.1 创建下拉框子组件

为了和官网区分，我们自己的名字为 SelectCustom。

位置：src\components\SelectCustom\xingHaoCustom.vue
解析：
·1、监听器watch作用有两个：日期改变时，将子组件的值回传给父组件；日期控件清空时，它会赋值为null，底层会报错的，我们必须将其重置为空串。
2、created() 页面已创建时，需要初始化默认值，也就是父组件传来的值。
3、@change 是下拉框的改变事件，目的为了可以传键值对，有时候我们也需要 key。

<!-- @desc 造轮子@author gyc@date 2023-12-18@note 砂型号通用组件（不要随意修改）-->
<template><div class="content"><el-selectv-model="retvalue"placeholder="请选择砂型号"filterabledefault-first-option@change="handleSelectModel"><el-optionv-for="item in modelOptions":key="item.key":value="item.value"/></el-select></div>
</template><script>
export default {name: "XingHaoCustom",// 接收父组件传递的值props: {defaultValue: {// type: Text,required: false,default: "",},},data() {return {//  砂型号modelOptions: [{key: "10",value: "一型",},{key: "15",value: "一型半",},{key: "20",value: "二型",},{key: "30",value: "三型",},{key: "40",value: "四型",},{key: "60",value: "六型",},{key: "70",value: "七型",},{key: "80",value: "八型",},{key: "90",value: "九型",},],//返回值retvalue: "",retkey: "",};},watch: {retvalue: {handler(newVal) {// 清空重置值，为null报错if (newVal == null) {this.retvalue = "";}// $emit() 向外触发父组件中方法this.$emit("handleSelectXingHao", {key: this.retkey,value: this.retvalue,});},},},created() {// 初始化值this.handleDefaultValue();},methods: {handleDefaultValue() {//父组件传的默认值this.retvalue = this.defaultValue;},handleSelectModel(e) {let obj = {};obj = this.modelOptions.find((item) => {return item.value === e;});this.retkey = obj.key;},},
};
</script>

2.2 父组件声明

import XingHaoCustom from "@/components/SelectCustom/xingHaoCustom";components: {YGuiGeCustom,XingHaoCustom,},

2.3 父组件使用

 <el-form-item label="砂型号" prop="砂型号"><xing-hao-custom:defaultValue="postForm.砂型号"@handleSelectXingHao="handleSelectXingHao"></xing-hao-custom></el-form-item>

2.4 子组件回调父组件方法

 /*** 接收子传父的数据*/handleSelectXingHao(val) {this.postForm.砂型号编码 = val.key;this.postForm.砂型号 = val.value;},

注意：这里我们子组件可以传键值对过来，不是单纯的值.

三、效果展示

3.1 前端页面

下拉框，我们使用自己的子组件。

3.2 服务器接收

我们来看看，编码key 有没有获取到。打个断点服务器端接收查看一下接收参数。

我们前端定义的 “二型”，编码就是"20"，完全正确。

四、资源链接