后台管理系统--编写过程中遇到的问题总结

Posted 2021-02-12 liuw44

1、父子组件间的传值与vuex

起初，弹框的显示我都用了vuex来实现，虽然可以实现但没有真正发挥vuex是用处，属于滥用了，直到大牛指点说vuex一般都用来处理接口请求回来的复用性高的数据，而不是什么都用vuex，弹框就直接使用父子之间的传值就可以了（vuex--为了没有直接关系的组件间的数据共享，用在调用接口上即可，不要滥用）。

① 父子组件间的传值

父--子：父在子组件标签里通过:xxx="xxx"的方式传给子组件，子组件通过props接收，如若要改变接收过来的值就在计算属性里改变而不直接改变props的值，改变的时候需要设置set(){}；

子--父：通过$emit方法传递（虽然传递的是方法，但是是在父组件里监听然后改变对应的值，可以看做是将操作控制权还给了父组件）；$emit传递给父组件后，具体的值的改变写在父组件里；

//父组件
<Button @click="handleShowSon">显示子组件</Button>
//@监听子组件传过来的方法，:给子组件传值
<son @sonEmit=“onSonEmit" :showSon="showSon"></son>
<script>
export default{
 data(){
  return {
    showSon:false,
  }
 },
 methods:{
  handleShowSon(){
    this.showSon=!this.showSon;
  },
//监听到子组件传过来的方法（知道子组件想要执行此操作了）就改变变量的值
  onSonEmit(){
     this.showSon=false;
  }
 }
}

//子组件
<div v-show="sonShow">显示出了子组件</div>
<button @click="backFather">回到父组件</button>
<script>
export default {
  props:{
    sonShow:Boolean
  },
  methods:{
    backFather(){
      this.$emit(‘sonEmit‘)//将变量改变的控制权给了父组件里，在父组件的子组件标签里监听到然后写方法来改变变量
    }
  }
}

 父子间的传值只要是能连接起来的组件间就用这个，父子、子父子都可以用，场景有弹框的显示，弹框标题，点击该行表格后数据的传递等。

② vuex，state里放共用数据，组件要改变state里的变量通过commit方法将改变权力给了mutations（类似$emit ）；actions和mutations类似，只是是通过dispatch方法激活，与mutations不同点在于可以处理异步操作；首先在需要用到变量的组件的计算属性里获取到变量来控制组件的渲染，反过来想改变该变量时就通过commit方法将控制权给了vuex，让vuex来操作变量的改变。

2、富文本编辑器

使用的是wangeditor（还有simplemde、vue-simplemde、editor.md等）；使用到的功能有文字的大小、是否加粗、上传图片、视频以及撤销按钮、将编写的文本内容提取成json格式。具体有哪些方法在

这里要将编辑框大小调整成手机屏幕大小，因为是插件只能修改其类下的样式，注意要在App.vue里修改插件样式才能生效，要加!important。

3、地图

使用的是腾讯地图，因为小程序客户端使用的是腾讯地图为了统一；放地图的容器必须设置宽高才会显示出来；https://blog.csdn.net/KLbluegreen/article/details/87184169 这是我学习腾讯地图的笔记，具体代码方法可以参考；在项目中没有用到全部的api，只需要点击地图获得地址信息即可，主要就是获取了地址信息后，要将信息返回给父组件里，使用的父子间传值实现的。

遇到的困难不是地图的操作上，而是获取到点击点的信息的后续操作 --- 地区的选择，要实现的效果是先根据地图计算出选择的省市区，然后还可以选择配送的范围是该区还是该市下的全部区：

大概思路：首先是从地图弹框里获取到数据，先渲染到页面（父组件）里并传入另一弹框（子组件），然后子组件进行选择，是勾选全部（最后范围是到市）还是勾选区（最后范围是到区），再将选择后的数据返回给父组件，父组件再根据返回是全部还是区再重新渲染。（我有点绕晕了）

具体：获取到子组件地图弹框传过来的值，在父组件里分别获取省市区，先连接成字符串，再分隔形成数组，赋值给数组变量（this.cityArr），在标签里循环这个变量（父组件渲染）；并将此变量传给子组件省市区的选择弹框，在子组件里进行选择全部还是该区后将选择结果传回给父组件；此时若父组件直接修改之前渲染的数组变量，再打开省市区时数据也会跟着变，这里采用的是在模板渲染处进行限制，即如果选择了全部就只渲染前两项，若选择了该区就都渲染出来。这样页面是完成了，但真的往后台传数据时就会很麻烦，要重新判断传省市还是传省市区了。

4、中间被检查代码时提出的问题

有添加编辑删除灯交互行为需要有具体的数据操作与展示。按钮样式要统一。按钮多的情况下，按钮间要有间距，左右和上下。菜单收起来，要把每个菜单的图标显示出来，随便找一些图标先放上去。没有说明什么知识点，只是记录下正常是应该需要进行一次代码检查的，还有这些需要注意的点以后可以避免。

5、混入

vue文档里有，将复用性高的js代码写在一个文件里，在组件里先引入js文件，然后在export default里配置，就可以在标签直接使用其中的方法了。

import mixin from ‘./mixin‘
import itemMixin from ‘./item-mixin‘
export default {
  name: ‘SideMenuItem‘,
  mixins: [ mixin, itemMixin ],//是混入的写法
}

和直接在此处写methods方法然后在标签里调用一样的效果。

6、数组方法

splice(index,n,arr)，可替换、删除，返回的是被删除的项，所以应该重新获取该数组，

arr=[1,2,3,4,5]；
return arr.splice(1,1)；//[2]
arr;//[1,3,4,5]

split()，以什么分隔字符串从而形成数组；

concat()，将一个数组添加到另一个数组里；

pop()，删除数组的最后一项。

7、插槽

组件可以使用插槽，但不能滥用；
可以具名插槽，<slot name="header"></slot>
使用的时候是在组件标签里写<template v-slot:header></template>。

 

         有问题以及有错误请及时赐教

         ^_^