这次打算用新的后台框架重构一下自己之前的物联网后台系统，还是选用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">
餐厅名:     {{res.name}}
</div>
<div class="text">
餐厅编码:     {{res.restaurant_id}}
</div>
<div class="text">
设备状态:     {{res.state}}
</div>
<div class="text">
当前油量:     {{res.current_oil}}(公斤)
</div>
<div class="text">
最后油量改变时间:     {{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传参给子组件关闭面板
