后台重构随笔

这次打算用新的后台框架重构一下自己之前的物联网后台系统，还是选用VUE，框架搭建使用的vue-element-admin,框架很完善，只是在上面拼凑自己需要的界面和功能而已，这里只是记录一下开发中学习到的知识点，和遇到的问题

1.组件

在之前的框架开发上，一个页面及一个VUE文件，里面的所有内容冗杂在一起，小页面问题不大，组件多的页面写到后面相当痛苦，几乎到了根本无法维护的地步，

冗杂的vue页面

这次学习框架，把每个页面划分为不同的块，进行单独的组件开发最后再拼凑成一个页面，这样哪里出问题就去哪个组件修改，维护和更新的速度非常快

划分为不同的模块开发

写代码过程中遇到的情况

1.1情况：父组件是地图组件

地图组件

需要在点击标签后，弹出详情框

点击打开详情组件

然后点击关闭按钮后详情框关闭

父组件

<template>
<user-info :res='res' :show='show' @HideUserInfo='HideUserInfo'></user-info>
</template>

<script>
    import userInfo from './UserInfo.vue'

    export default {
        data() {
            return {
                show:false,
                res:{},
            }
        },
        mounted() {
            this.getMarkerData()
        },
        methods: {
            pointclick(data) {
                this.res = data
                this.show = true
            },
            HideUserInfo(){
                this.show = false
            }
        }
    }
</script>

子组件

<template>
    <el-card class="box-card  res-msg" v-show="show">
        <div slot="header" class="clearfix">
            <span>餐厅信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click='toDetail'>详细信息</el-button>

        </div>
        <div class="text">
            餐厅名:&nbsp&nbsp&nbsp&nbsp&nbsp{{res.name}}
        </div>
        <div class="text">
            餐厅编码:&nbsp&nbsp&nbsp&nbsp&nbsp{{res.restaurant_id}}
        </div>
        <div class="text">
            设备状态:&nbsp&nbsp&nbsp&nbsp&nbsp{{res.state}}
        </div>
        <div class="text">
            当前油量:&nbsp&nbsp&nbsp&nbsp&nbsp{{res.current_oil}}(公斤)
        </div>
        <div class="text">
            最后油量改变时间:&nbsp&nbsp&nbsp&nbsp&nbsp{{res.last_time}}
        </div>
        <el-button style="float: right; " type="text" @click='HideUserInfo'>关闭</el-button>
    </el-card>
</template>

<script>
    export default {
        //父组件通过props属性传递进来的数据
        props: {
            show: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            res: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {

            }
        },
        methods: {
            HideUserInfo() {
                 this.$emit('HideUserInfo');
            },
            toDetail() {

            }
        }
    }
</script>

父组件通过点击标签修改show属性，传递给子组件显示面板，再关闭子组件的时候我本来想通过直接修改子组件的this.show = false，来隐藏面板，虽然成功了，但是vue报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show"

百度后知道是因为在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

所以在父组件传递进来的属性最好也由父组件来控制关闭，不然会导致两个组件耦合度太高，所以及修改为上面的模式，通过点击关闭来触发父组件的关闭方法，再由父组件修改this.show传参给子组件关闭面板

后台重构随笔