Vue 父亲组件更新子组件后子组件属性数据不改变

记录一下 。

父组件内容：

<template>
    <div style="height:100%">
        <el-container>
            <SiteAside :isCollapse="iscollapse" :key="timer"></SiteAside> // 这是父组件需要传递自己的iscollapse数据给SiteAside组件，通过在SiteAside 组件中定义自定义属性isCollapse，并绑定父组件的iscollaspe接收父组件的数据
                                                                          // 关键点： 必须对子组件的key 属性进行赋值，否则子组件数据不会变更。 key 绑定父组件的timer
            <el-container>
                <el-header><PageHeader @transfer="setCollapse"></PageHeader></el-header>  // 这是PageHeader子组件中的isCollapse改变后通过this.$emit("transfer",this.isCollapse);发送给父组件

                                                                                          // 其实就是子组件主动触发一个transfer事件，在父组件中通过监控transfer事件变更自生的数据

                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>



<script>
import SiteAside from '../components/SiteAside.vue'
import PageHeader from '../components/PageHeader.vue'

export default{
    name:"MainPage",
    components:{
        SiteAside,
        PageHeader
    },
    data:function(){
        return {
            iscollapse:false,
            timer:""            // 定义一个timer数据用于子组件的key属性的绑定
        }
    },
    methods: {
        setCollapse: function (msg) {
            console.log("father", msg)
            this.iscollapse = msg;
            this.handleAddOrder();
        },
        handleAddOrder() {
            this.timer = new Date().getTime();    //添加此方法即可，变更timer的值
        }
    }
}

　子组件代码：

<template>
    <div class="nogape">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#424f63" text-color="#fff" active-text-color="#65cea7" :collapse="isCollapseValue">
            <el-submenu index="0">
                <template slot="title">
                    <a href="http://eip.faw-vw.in/sites/cn/SitePages/home.aspx">
                        <img src="../assets/faw-vw-white-word.png" alt=""></a>
                </template>
            </el-submenu>
            <el-submenu index="1">
                <template slot="title">
                    <svg-icon icon-class="home-fill"></svg-icon>
                    <span slot="title" style="margin-left:10px">Cockpit</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">Cockpit</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
                <template slot="title">
                    <svg-icon icon-class="laptop" />
                    <span slot="title" style="margin-left:10px">OverView</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">OverView</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                    <svg-icon icon-class="menu_unfol_white"></svg-icon>
                    <span slot="title" style="margin-left:10px">CyberSecurity</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">CyberSecurity</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <svg-icon icon-class="gear"></svg-icon>
                    <span slot="title" style="margin-left:10px">目标制定</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1">Audit目标</el-menu-item>
                    <el-menu-item index="4-1">PPM目标</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
                <template slot="title">
                    <svg-icon icon-class="mail-white"></svg-icon>
                    <span slot="title" style="margin-left:10px">Mail</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">Mail</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
                <template slot="title">
                    <svg-icon icon-class="sign-in"></svg-icon>
                    <span slot="title" style="margin-left:10px">Login Page</span>
                </template>
            </el-submenu>
        </el-menu>
    </div>

</template>

<style>
.nogape .logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    z-index: 100;
    background: #424f63;
}
.logo {
    padding-top: 5px;
    height: 50px;
}
.el-menu-item, .el-submenu__title {
    height: 44px;
    line-height: 44px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
    padding-left: 10px !important;
}
.el-submenu .el-menu-item {
    height: 44px;
    line-height: 44px;
    padding: 0 45px;
    min-width: 200px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
}
.el-menu-vertical-demo {
    width: 40px;
    height: 100%;
    min-height: 400px;
    padding: 12px,20px;
}
.nogape{
    height: 100%;
}
body, html {
    height: 100%;
    margin: 0;
}
</style>

<script>
export default {
    name: 'SiteAside',
    data() {
        return {
            isCollapseValue:this.isCollapse //接收父组件传递的给子组件的isCollapse的值}; },

props:{ isCollapse:Boolean }, 
watch:
{
 isCollapseValue:
    { 
     deep:false, handler(newV,oldV)
      　　{ 　　
　　　　
　　　　　　　　console.log(oldV); 
　　　　　　　　this.isCollapseValue = newV
　　　　　　　　　　 } } },  //监控
 methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, initData(){ console.log("子组件:" + this.isCollapse); } } } </script>