Vue中子組件的顯示與隱藏方式

更新時間：2022年09月09日 11:12:41 作者：Rhine404

這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

子組件的顯示與隱藏

在使用Vue開發(fā)前端頁面的過程中，經(jīng)常都會遇到需要在父組件中控制子組件的顯示/隱藏，比如彈出窗口。最簡單的方法就是：通過父子組件間的數(shù)據(jù)雙向綁定來實現(xiàn)。這種方法雖然簡單，但只是針對于父與子組件這種關系來實現(xiàn)的。如果是子組件與子組件之間，可以考慮使用Vuex來完成。

另外我自己也是一個前端小白，為了更方便大家理解，我將代碼拆分成了兩個步驟：

第一步是實現(xiàn)父對子的顯示/隱藏的控制（v-show）
第二步是實現(xiàn)子組件對自己的隱藏（父子組件參數(shù)傳遞）

完整的代碼在2.1與2.2中。

第一步使用v-show

這一步首先實現(xiàn)在父組件通過v-show對子組件的顯示/隱藏進行控制。

父組件中有顯示/隱藏按鈕，點擊后顯示/隱藏子組件，效果如下：

1.1 父組件

<template>
  <div class="contain">
    <p>這里是父組件頁面</p>
    <button @click="showDialog(true)">顯示</button>
    <button @click="showDialog(false)">隱藏</button>
    <!-- 這里使用v-show -->
    <subDialog v-show="dialog_visible"></subDialog>
  </div>
</template>

<script>
// 引入子組件
import subDialog from "@/components/Dialog/subDialog";
export default {
  components: { subDialog },
  data() {
    return {
      // 控制子組件顯示與隱藏的標識，類型為Boolean
      dialog_visible: false
    }
  },
  methods: {
    showDialog(visible) {
      this.dialog_visible = visible;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 加入css代碼僅是為了使界面更加直觀 */
.contain {
  height: 300px;
  width: 400px;
  text-align: center;
  padding: 20px;
  background-color: #9dd3fa;
}
</style>

Vue中的v-show指令會通過切換CSS中display屬性的值，使對應元素顯示/隱藏。

簡化了click方法，將顯示/隱藏按鈕的點擊事件寫到了一起。

1.2 子組件

目前子組件中僅僅只是做界面的顯示。

<template>
  <div class="sub-contain">
    <p>這里是子組件窗口</p>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="scss" scoped>
/* 加入css代碼僅是為了使界面更加直觀 */
.sub-contain {
  height: 150px;
  width: 100%;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #1f6fb5;
  color: #fff;
}
</style>

2 第二步父子組件傳參

在第一步中，我們通過在父組件中修改dialog_visible的值，來控制子組件的顯示/隱藏，非常簡單。

而下一步，我們還需要實現(xiàn)在子組件中隱藏（關閉）自己。

原理上很簡單，其實就是在子組件中，修改父組件中的dialog_visible參數(shù)嘛。

最終的效果如下：

2.1 父組件

<template>
  <div class="contain">
    <p>這里是父組件頁面</p>
    <button @click="showDialog(true)">顯示</button>
    <button @click="showDialog(false)">隱藏</button>
    <!-- 新增了向子組件傳遞的參數(shù)dialog_visible 與 自定義事件dialogVisibleEvent -->
    <subDialog 
	  v-show="dialog_visible" 
      :dialog_visible="dialog_visible"
      @dialogVisibleEvent="showDialog">
   	</subDialog>
  </div>
</template>

<script>
// 引入子組件
import subDialog from "@/components/Dialog/subDialog";
export default {
  components: { subDialog },
  data() {
    return {
      // 控制子組件顯示與隱藏的標識，類型為Boolean
      dialog_visible: false
    }
  },
  methods: {
    showDialog(visible) {
      this.dialog_visible = visible;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 加入css代碼僅是為了使界面更加直觀 */
.contain {
  height: 300px;
  width: 400px;
  text-align: center;
  padding: 20px;
  background-color: #9dd3fa;
}
</style>

父組件的變化并不大，主要有兩個地方：

向子組件傳參，即將dialog_visible傳遞給子組件
設置自定義事件與其處理方法

2.2 子組件

<template>
  <div class="sub-contain">
    <p>這里是子組件窗口</p>
    <button @click="doClose">隱藏</button>
  </div>
</template>

<script>
export default {
  props: {
    dialog_visible: Boolean
  },
  data() {
    return {
      visible: this.dialog_visible
    }
  },
  watch: {
    visible(val) {
      this.dialog_visible = val;
    }
  },
  methods: {
    doClose() {
      // 觸發(fā)父組件中的dialogVisibleEvent事件，并傳遞參數(shù)
      this.$emit('dialogVisibleEvent', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.sub-contain {
  height: 150px;
  width: 100%;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #1f6fb5;
  color: #fff;
}
</style>

子組件中增加了一個按鈕，用于隱藏自身，通過觸發(fā)父組件事件來修改父組件中dialog_visible的值。

用一張圖來表示父、子組件間數(shù)據(jù)雙向綁定的數(shù)據(jù)流向是：

如此便完成了Vue子組件的顯示與隱藏。

（最后吐槽一句，CSDN這markdown編輯器的代碼塊高亮都還不支持vue的語法，勉強用html語法的高亮代替…）

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue編程三部曲之將template編譯成AST示例詳解
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
前端Vue單元測試入門教程
單元測試是用來測試項目中的一個模塊的功能，本文主要介紹了前端Vue單元測試入門教程，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue+elementui實現(xiàn)表格多級表頭效果
這篇文章主要為大家詳細介紹了vue?+?elementui實現(xiàn)表格多級表頭，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue 的雙向綁定原理與用法揭秘
這篇文章主要介紹了Vue 的雙向綁定原理與用法,結合實例形式總結分析了Vue 的雙向綁定基本原理、功能、用法及注意事項,需要的朋友可以參考下
2020-05-05
vue.js聲明式渲染和條件與循環(huán)基礎知識
這篇文章主要為大家詳細介紹了vue.js聲明式渲染和條件與循環(huán)的基礎知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
使用Vue實現(xiàn)Markdown文檔的展示和解析
在Vue項目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進行Markdown文檔展示與解析也成為了一個熱門話題,本文將介紹如何使用Vue實現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下
2024-01-01
vue-music關于Player播放器組件詳解
這篇文章主要為大家詳細介紹了vue-music關于Player播放器組件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
vue中實現(xiàn)高德定位功能
這篇文章主要介紹了vue中實現(xiàn)高德定位功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
vue.js 實現(xiàn)輸入框動態(tài)添加功能
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
vuex的幾個屬性及其使用傳參方式
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01