VUE基础易错点概述

本文主要介绍了 Post与Get请求、插槽、验证器的使用、ref与$refs、lable 与 :lable、两个页面的切换以及自定义组件
用于个人使用复习

---

Post/Get请求的区别

Post	Get
Post是前端向后端发送数据——修改和写入数据	Get是后端向前端传送数据——搜索排序和筛选的操作
在控制器上使用 @RequestBody 注解	在控制器上使用 @RequestParam 注解
@RequestBody接收的参数是来自requestBody中，即请求体	@RequestParam接收的参数是来自requestHeader中，即请求头（URL后面）
post能发送更多的数据类型 使用params参数，Params可以跟在网址后直接传输数据	get只能发送ASCII字符 使用data参数,POST请求需要有数据隐藏，data被包装在请求头中，可以隐藏
Post更快——Post需要先发送请求，得到浏览器确认后，再发送数据	Get是数据与请求同时发送
Post更安全——不会作为URL的一部分	Get请求会将数据缓存起来

---

插槽

插槽,占坑 在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑

• 匿名插槽
  单个slot标签的形式<slot>
  作为标签使用,匿名插槽 , 一次性的。需要在子组件中定义,有一个与之对应，没有内容传递过去的时候,会显示插槽的内容(默认内容)
• 具名插槽
  具名插槽 , 可以实现父组件对子组件的指定位置显示内容或传参,父组件将根据name来填充对应的内容。
  • 在子组件中要先定义好插槽，并起好名字 <slot name="t1">
  • 在父组件中的视图层中，某个标签上，给这个标签添加slot属性,在属性赋值上具体插槽的名字即可 <h2 slot="t1">

---

验证规则的使用

• 在Form表单组件中
  • 通过 :rules 属性传入约定的验证规则
  • prop 属性设置为需校验的字段名
    
• 在data中定义规则
  • required : 是否必填，默认为false。
  • message: 验证失败时显示的错误消息
  • trigger: 触发验证的事件，默认为’blur’
  • validate: 自定义验证函数(验证器)
    

填写required属性后，字段会显示标识

• 自定义验证器
  • 自定义validator验证器，注意需要与retur同级

         // 基本格式如下
         //rule     其参数是一个对象，用于定义验证规则
         //value    表示表单字段的值  当用户输入或修改表单字段时，它的值会被实时更新  可以通过value获取当前字段的值
         //callback 其参数是一个函数，用于处理验证结果
         var 验证器名= (rule, value, callback) => {
              if (判断条件) {
                callback(new Error('报错信息'))
              } else {
                callback()
              }
            }

• 定义规则中使用validate属性指定验证器
  

---

ref与$refs

• ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。
  • 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素
  • 如果用在子组件上，引用就指向组件

• 使用ref给组件元素注册了引用信息

<!-- ref可以直接加在HTML标签上，作为一个属性存在于HTML标签中 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">

• 使用this.$refs获取这个DOM元素

//这里实际是做一个清空表单的操作
this.$refs['dataForm'].resetFields()
//可以理解为ref 和 $refs 是对应的，一个注册一个获取

---

lable 与 :lable

三种绑定数据的方式：

• :label 绑定的是 Boolean 布尔类型或 Integer 整型数值
• label 绑定的是 String 字符串类型
• 需要绑定对象时，可以通过lable的拼接完成： :label="${item.Name}/${item.Brand}/${item.Type}"

---

两个页面间的切换

在主页面中，自定义子组件

• 使用 import 引入文件

  import GoodsAddOrUpdate from './goods-add-or-update';

import 的四种引入方式

• 引入第三方插件: import echarts from 'echarts'
• 导入组件: import name1 from './name1'
• 引入工具类: import {axiosfetch} from './util';
• 导入css文件: import 'iview/dist/styles/iview.css';

• 在 export default {} 导出中，定义组件

    components: {
      GoodsAddOrUpdate
    },

• html语句中，使用自定义组件
  这里通过addOrUpdateVisible变量做是否显示页面，并调用getDataList()方法
  （refreshDataList事件是在子页面定义的）

    <GoodsAddOrUpdate v-if="addOrUpdateVisible" ref="GoodsAddOrUpdate" @refreshDataList="getDataList"></GoodsAddOrUpdate>

• 在需要子页面显示的方法中 修改Visible变量，调用子组件中的方法
  这里以新增功能为例

      addOrUpdateHandle (id) {
        // 显示子组件页面
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.GoodsAddOrUpdate.init(id)
        })
      },

在子页面中 .sync修饰符

• 设置 visible 变量掌控子页面的显示

export default {
    return {
      visible: false,
    }
}

• 在所有组件的外层 填入 :visible.sync 属性进行父子页面间的双向绑定

<el-dialog :visible.sync="visible">
  <!-- 注意此标签需要在所有组件上边（仅次于<template>下） -->

.sync 修饰符 可以快速进行父子组件之间的通信 , 是父组件监听子组件更新某个props的请求的缩写语法
所以子组件中需要有与之对应的 “更新” / “update”

• 在父组件调用的子组件方法中 使页面显示

init(id){
    ...
    this.visible = true
    ...
}

• 在数据提交的方法中，关闭页面 并 提供 “更新” 方法

dataFormSubmit() {
    //传递数据到后端...
    ...
    onClose: () => {
        //关闭页面展示
        this.visible = false
        //提供‘更新’，与.sync对应
        //子类响应父类，回调刷新
        this.$emit('refreshDataList')
    }
    ...
}