后台管理系统--编写过程中遇到的问题总结（⼀）
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、地图
使⽤的是腾讯地图，因为⼩程序客户端使⽤的是腾讯地图为了统⼀；放地图的容器必须设置宽⾼才会显⽰出来；
blog.csdn/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>。
有问题以及有错误请及时赐教
^_^

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。