快捷導(dǎo)航

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

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

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

子組件的顯示與隱藏

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

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

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

完整的代碼在2.1與2.2中。

第一步使用v-show

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

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

1.1 父組件

<template>
  <div class="contain">
    <p>這里是父組件頁(yè)面</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 {
      // 控制子組件顯示與隱藏的標(biāo)識(shí)，類型為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指令會(huì)通過(guò)切換CSS中display屬性的值，使對(duì)應(yīng)元素顯示/隱藏。

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

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 第二步父子組件傳參

在第一步中，我們通過(guò)在父組件中修改dialog_visible的值，來(lái)控制子組件的顯示/隱藏，非常簡(jiǎn)單。

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

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

最終的效果如下：

2.1 父組件

<template>
  <div class="contain">
    <p>這里是父組件頁(yè)面</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 {
      // 控制子組件顯示與隱藏的標(biāo)識(shí)，類型為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>

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

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

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>

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

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