【Vue入門】利用VueCli搭建基本框架--在Home頁實現展開收縮導航欄功能（七）

上節整理了一下vue中引入組件的兩種方式

這節講下vue中父子控件的傳值問題

要實現的功能就是，點擊紅框的小圖標時，左側導航欄收縮，同時小圖標箭頭朝右。當點擊箭頭朝右的圖標時，導航欄能展開同時小圖標再次改為朝左的圖標

  

 

 再看下我們home頁面的代碼，里面采用了上左右結構布局。頂部是一個組件，左側也是一個組件。

也就是說我們在動的時候，操作的是頭部組件里的東西，而聯動效果是影響左側導航欄

ps：  el-aside  后面加 style="transition:0.5s;"  可以使頁面緩慢移動

 

<template>
  <el-container>
    <el-header>
      <headerMenu />
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '50px':'200px'">
        <myMenu />
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

1、在Home頁面設置監聽方法，接收子控件的傳值

根據vue中子控件傳值給父級的方式我們在<headerMenu />綁定我們父級的監聽事件。isCollapse 是定義的一個布爾值。用來傳遞給導航子組件，控制導航欄收縮或展開

handleHeaderChange里面的參數data就是由子組件通過$emit('方法名',值)的調用返回回來的

<!--模板代碼中添加v-on代碼-->
<headerMenu v-on:my-header-handle="handleHeaderChange" />

methods:{
    //監聽HeaderMenu控件中的值變化，設置父控件中isCollapse的值
    handleHeaderChange(data){
      console.log('傳會給父控件的data值是:',data)
      this.isCollapse = data
      console.log('isCollapse的值是：',this.isCollapse)
    }
 }

2、在headerMenu組件中調用父級方法傳值出去

這里面還涉及到  :class動態綁定數組變量，通過給變量重新賦值達到改變icon的目的。關鍵代碼如下：

 //設置收縮或展開圖標的樣式
            handleChangeI(){
                if(this.iconArr.includes('el-icon-d-arrow-left')){
                    this.iconArr.pop();
                    this.iconArr.push("el-icon-d-arrow-right")
                    //給父控件傳遞回去
                    this.$emit('my-header-handle',true)
                }else{
                    this.iconArr.pop();
                    this.iconArr.push("el-icon-d-arrow-left")
                    //給父控件傳遞回去
                    this.$emit('my-header-handle',false)
                }
            }

headerMenu完整代碼如下：

<template>
    <div class="main">
        <div class="managerTitle">
            <label>XX后台管理系統</label>
            <i :class="iconArr" @click="handleChangeI"></i>
        </div>
        <div class="header">歡迎：{{userName}}
            <el-dropdown>
            <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="handlePerson">個人設置</el-dropdown-item>
                <el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    
</template>

<script>
    export default {
        data(){
            return{
                userName:'admin',
                iconArr:["el-icon-d-arrow-left"]
            }
        },
        methods:{
            //進入個人設置頁面
            handlePerson(){
                console.log('用戶點擊了個人設置')
            },
            //用戶退出
            handleLoginOut(){
                console.log('用戶點擊了退出設置')
            },
            //設置收縮或展開圖標的樣式
            handleChangeI(){
                if(this.iconArr.includes('el-icon-d-arrow-left')){
                    this.iconArr.pop();
                    this.iconArr.push("el-icon-d-arrow-right")
                    //給父控件傳遞回去
                    this.$emit('my-header-handle',true)
                }else{
                    this.iconArr.pop();
                    this.iconArr.push("el-icon-d-arrow-left")
                    //給父控件傳遞回去
                    this.$emit('my-header-handle',false)
                }
            }

        }
    }
</script>

<style>
    .main{
        display: flex;
        justify-content: space-between;
    }
    .managerTitle{
        color:white;
        font-size: 1.5rem;
        width: 15%;
    }
    .header{
        text-align: right;
        background-color: #545c64;
        color:white;
        width: 100%;
    }
    .el-dropdown-link{
        color:yellow
    }
    
</style>

 

3、home頁面拿到特征值后，根據值來控制導航div的寬度，從而達到隱藏或顯示導航欄的效果

 <el-aside :width="isCollapse ? '50px':'200px'">

4、最后再補一下home頁面的完整代碼：

<template>
  <el-container>
    <el-header>
      <headerMenu v-on:my-header-handle="handleHeaderChange" />
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '50px':'200px'">
        <myMenu />
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

 

<script>
import myMenu from "@/components/navMenu";
import headerMenu from "@/components/headerMenu";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  components: {
    myMenu,
    headerMenu,
  },
  methods:{
    //監聽HeaderMenu控件中的值變化，設置父控件中isCollapse的值
    handleHeaderChange(data){
      console.log('傳會給父控件的data值是:',data)
      this.isCollapse = data
      console.log('isCollapse的值是：',this.isCollapse)
    }
  }
};
</script>

<style>
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #545c64;
}
.el-main {
  background-color: #eaedf2;
}
.el-header{
  width: 100%;
  background-color: #545c64;
}
</style>