這次打算用新的后臺框架重構一下自己之前的物聯網后臺系統涂邀，還是選用VUE，框架搭建使用的vue-element-admin,框架很完善箱锐，只是在上面拼湊自己需要的界面和功能而已比勉，這里只是記錄一下開發(fā)中學習到的知識點，和遇到的問題

1.組件

冗雜的vue頁面

劃分為不同的模塊開發(fā)

寫代碼過程中遇到的情況

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">
            設備狀態(tài):&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數據欲虚。

所以在父組件傳遞進來的屬性最好也由父組件來控制關閉，不然會導致兩個組件耦合度太高悔雹，所以及修改為上面的模式复哆，通過點擊關閉來觸發(fā)父組件的關閉方法，再由父組件修改this.show傳參給子組件關閉面板