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

Posted 2023-02-06 xiaoyuquanquan

记录一下 。

父组件内容：

<template>
    <div >
        <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" ></a>
                </template>
            </el-submenu>
            <el-submenu index="1">
                <template slot="title">
                    <svg-icon icon-class="home-fill"></svg-icon>
                    <span slot="title" >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" >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" >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" >目标制定</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" >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" >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>