前端人资后台项目——v-model优化问题与权限点管理

语法糖（封装让语法更简单）：指的是把较复杂的语法经过一定的封装变成简单的语法 供开发者方便使用 本质上其实底层的语法没有变化，只是做了一点点封装，更简单而已。

v-model 父子通信的语法糖：（其实就是在常规的父子通信方案的基础上 封装一层 变得更加简单了）

在一个组件上定义v-model指令：

等同于如下三步：

1. 给组件绑定了一个默认名称为 value 的prop

2. 给组件绑定了一个默认名称 input 的自定义事件

3. 在自定义事件的回调函数中 把自定义事件触发时候传出来的参数 赋值给v-model绑定的响应式数据

this.$emit('input'，'this is msg')  this is msg会自动赋值给userInfo.staffPhoto

 父组件：

v-model语法糖：
打开组件——当我们只给绑定，没有在props中接收时，在vue调试工具中，我们可以发现，数据在$attrs中存着。——打开子组件（用value接收，内部写type: string 默认值来个空串）——下方Url可以删除——url监听也修改成value的监听（）
 

子组件：

export default {
  name: 'UploadImg',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageUrl: '', // 如果想要他回填数据 必须把拉到数据交给这个imageUrl才行 父传子
      percentage: 0,
      flag: false
    }
  },
  watch: {
    value: function() {
      this.imageUrl = this.value
    }
  },

你告诉我有个value我就接收，你告诉我有个input绑定，我就触发，你告诉我可以自动赋值，我就不用手动去修改了。

拉数据————————————————————————————————————————引入接口——配置methods方法——调用接口——等待返回值——返回值交给getpermissionList——mounted（） {} 中发送接口请求（打印一下，查看控制台，会多出个permission）<——因为没有传入参数，会返回默认数据 —— 拿到数认绑定一下 ： prop

vue结构（复制）

.vue文件是什么？

.vue文件相当于一个页面中的组件，包含了关于该组件的html-css-js文件集合。

参考于：单调先生 - 简书 (jianshu.com)

.js是什么文件？以js为扩展名的文件,是用javascript脚本语言编写的。

——搜索Element Ui 查找table表格组件（做树状结构）

row key 指定唯一id值

删除操作：

找到删除按钮——修改成插槽，因为是表单，会有个row,我们给他解构——绑定点击事件，进行删除操作——确认confirm 方法 .then（）调用删除接口——把删除接口导入——更新列表——提示用户——catch中错误提示

            

              添加

              编辑

              删除

            

// 删除

    del(id) {

      this.$confirm('确定要删除该权限吗?', '温馨提示').then(async() => {

        await delPermission(id)

        // 更新列表

        this.fetchList()

        // 提示用户

        this.$message.success('删除成功')

      }).catch(() => {

        this.$message.warning('默认数据不可删除')

      })

    }

添加操作：

准备新弹框——showDialog:true 才能显示出来——控制showDialog，来控制显示和隐藏——绑定事件（弹框显示）——声明方法——绑定关闭（最好写回调函数，因为可能还会有其它操作。）——绑定表单数据（一堆空的数据）放入data——双向绑定——switch 启用不启用 参看组件 | Element

确认新增业务实现：

添加点击事件——声明确认方法——提交新增接口<——接口引进来——同页面中（按钮出现重复，type）——传递多个参数，可以用pid

// 一级add

  添加权限


// 二级add



// 记录关键信息 type和pid
add({type, id}) {
  
  this.showDialog = true
  // 记录当前添加的关键信息
  this.formData.type = type
  this.formData.pid = id
}

confirm() {
  // 提交新增接口
  addPermission(this.formData)
  this.closeDialog()
  this.fetchList()
}