实习日记 03 写下拉多选组件 使用vant写一个下拉多选的框架，如图(第一次写组件)组件看着很简单，以为自己可以很快搞定，没想到出现了很多问题！观察样图后觉得就是简单的下拉框，然后vant官网查找样式直接使用，遇到了第一个问题：我使用的vant没有样式，仅仅能识别成最简单的结构。后查找发现是样式没导入成功，因为是看着公司项目中的导入方式进行的导入，但是少导入了一些东西，所以一定要看官网的官方教程！具体实现思路：选项的展示：官网的是使用了自闭和的<van-dropdown-item/>标签，在其中使用options绑定需要展示的每一项，但是这样只能单选。可以将自闭和标签写分开即xxx<van-dropdown-item/>形式，这样可以在中间写多个div，在使用v-for循环将数据全部展示出来。多选是在每个数据对象添加一个是否勾选的属性。事件：点击事件一：更改选中状态 点击事件二、三(重置、完成)：for in循环遍历判断勾选状态样式：vant可以使用less样式进行快捷更改，要对less样式进行学习！最终自己实现效果具体样式慢慢改！两天的主要任务就是这个组件和写一个用户使用手册。

实习日记02 看项目首页源码 项目核心页面一顶部粘滞定位的top栏vue中的slot标签(插槽)，父组件在使用子组件标签内(即两个尖括号中间)添加一些内容，可以是文本或者代码等内容，然后子组件使用,则父组件添加的内容则会出现在slot标签的地方。默认插槽---父组件传递过去的内容默认会覆盖子组件内部之间的内容。具名插槽---slot标签中插入name属性，父组件中定义template的标签添加v-slot:xxx(可以省略直接用#xxx代替)。之后template中间的内容则会根据子组件中slot标签中的name属性找到匹配的内容，传递相应的内容。作用域插槽---子组件中slot标签内部通过v-bind:aaa='bbb'(bbb是子组件本身的属性),然后父组件在调用子组件标签的template标签内可以添加v-slot:default='aaa',这样父组件就可以拿到子组件的值了。可以和name属性搭配使用，default改成name='xxx'插槽作用：用于父组件给子组件传递内容和拓展、复用、定制组件vant相关search 搜索框路由懒加载除切换路由的时候可以懒加载，同一页面中的子组件也可以采用懒加载形式路由跳转使用this.$router.go(-1)直接后退一步父子通信使用props传递可以采用数组或者对象形式，采用对象形式可以设置数据的格式、是否有默认值。

实习日记 01 运行项目 熟悉项目运行项目删除 node_module 和 package_lock.json 这两个文件主要就是一些项目的依赖以及记录的模块的下载地址npm install，一键安装项目所需要的依赖包核对node版本和node-sass、node-less之间的版本对应关系，安装适合的版本npm run serve登录页面项目采用了vant组件库，登录页面使用了 van-field输入框 van-button提交按钮 van-grid宫格(用于图片布局或导航) van-sticky 粘性布局 van-dropdown 下拉菜单 tab标签页以及标签所对应的不同内容vue中有一个provide，会返回一个对象。和data和methods是平级的，把父组件的方法或者其他属性放入provide内部后，子孙组件就可以使用inject直接获取了。判断用户的输入是类型是数字，是的话就是输入的为手机号，需要在手机号前+86，猜测是调用发送接口验证码的时候需要。根据输入的密码长度判断是否允许登录$emit通常用于子组件调用父组件方法，实现子组件主动与父组件通信。实现方式是在子组件上使用this.$emit，然后父组件在子组件标签中使用@将方法传递过去。项目中实现该功能 是利用了.sync。具体实现方式如下：<son :age.sync="age"></son> //父组件 //子组件触发事件 mounted(){ console.log(this.$emit('update:age',123)); }项目中的.sync主要是实现数据的双向绑定，因为一个input框中只能使用一次v-model及逆行双向数据绑定，而.sync可以实现多个双向绑定。具体实现方式如下：watch:{ mValue1: { //首先监听mValue1变量(v-model绑定的变量) handler(newVal){ this.$emit('update:value1,'newVal) //mValue1只要变动就传递给value1 } }, value1: { handler(newVal){ this.mValue1 = val }, immediate: true } }疑问：两个值完全一样为什么要分别定义this.$refs.xxx 可以获取div的信息首页页面比较简单，很多变量不太懂有什么用处