系列文章
【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
文章目录
- 系列文章
- 前言
- 一、技术介绍
- 二、项目源码
- 2.1 创建下拉框子组件
- 2.2 父组件声明
- 2.3 父组件使用
- 2.4 子组件回调父组件方法
- 三、效果展示
- 3.1 前端页面
- 3.2 服务器接收
- 四、资源链接
前言
本专栏为 前端【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-select
v-model="retvalue"
placeholder="请选择砂型号"
filterable
default-first-option
@change="handleSelectModel"
>
<el-option
v-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"，完全正确。
