后台管理项目开发笔记2

1.三级联动（子传父）

2.展示属性

1.输入属性值后要去重去空格

2.获取焦点和文本去重

3.修改某个属性时注意深浅拷贝问题

点击编辑

3. $attrs和$listeners的组件通信

定义一个全局组件

全局注册

应用

4.el-pagination的使用

样式如图：

• 实现了点击页数展示对应页数的数据列表，以及每页展示的页数改变

5.请求业务分析

注意：v-show只是控制了子组件的显示和隐藏，这个子组件并没有卸载（只是显示或者隐藏），会导致mounted只能执行一次

父组件调用子组件的方法：ref获取组件

子组件方法：

ref获取子组件

父组件引用子组件数据

实现效果：

父组件传递row给子组件

子组件接收

6.照片墙收集

• 预览照片墙

• 删除图片

• 上传图片

7.响应式数据

• :value的值就是v-modle的值

• 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。* 是什么造成的呢？* 由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化* this.$set的用法详解* 调用方法: Vue.set( target , key , value)* * target: 要更改的数据源（可以是一个对象或者数组）* key 要更改的具体数据 （索引）* value 重新赋的值对象中新增inputVisible以及inputValue属性

利用this.$set()进行响应式数据

添加属性成功~

8.清空响应式数据

一句话搞定清空响应式数据~

让我们先认识一下this._data;

再认识一下this.$options.data();

ok,神奇的一句话来咯~

 Object.assign(this._data, this.$options.data()); 
1

就解决啦~

9.行内元素静态

使表单元素横着排列： :inline="true"

10.父组件调用子组件的方法，子组件发请求

在父组件中点击➕号后传当前row的值给子组件，子组件进行数据请求

绑给子组件：

11.当前组件的ID并且绑定给某个属性

：value 和 v-moudl的使用

将一级属性值和二级属性值绑定给一个新的对象，该对象就含有两级的ID值

获取的值如图所示

将获得的数据进行整理

ttps://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25ea3c49faa14a31844b58c62acaba6c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style=“margin: auto” />

将获得的数据进行整理