Vue中子組件的顯示與隱藏方式
子組件的顯示與隱藏
在使用Vue開發(fā)前端頁面的過程中，經(jīng)常都會(huì)遇到需要在父組件中控制子組件的顯示/隱藏，比如彈出窗口。最簡(jiǎn)單的方法就是：通過父子組件間的數(shù)據(jù)雙向綁定來實(shí)現(xiàn)。這種方法雖然簡(jiǎn)單，但只是針對(duì)于父與子組件這種關(guān)系來實(shí)現(xiàn)的。如果是子組件與子組件之間，可以考慮使用Vuex來完成。
另外我自己也是一個(gè)前端小白，為了更方便大家理解，我將代碼拆分成了兩個(gè)步驟：
- 第一步是實(shí)現(xiàn)父對(duì)子的顯示/隱藏的控制（v-show）
- 第二步是實(shí)現(xiàn)子組件對(duì)自己的隱藏（父子組件參數(shù)傳遞）
完整的代碼在2.1與2.2中。
第一步 使用v-show
這一步首先實(shí)現(xiàn)在父組件通過v-show對(duì)子組件的顯示/隱藏進(jìn)行控制。
父組件中有顯示/隱藏按鈕，點(diǎn)擊后顯示/隱藏子組件，效果如下：
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 {
// 控制子組件顯示與隱藏的標(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ì)通過切換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 第二步 父子組件傳參
在第一步中，我們通過在父組件中修改dialog_visible的值，來控制子組件的顯示/隱藏，非常簡(jiǎn)單。
而下一步，我們還需要實(shí)現(xiàn)在子組件中隱藏（關(guān)閉）自己。
原理上很簡(jiǎn)單，其實(shí)就是在子組件中，修改父組件中的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 {
// 控制子組件顯示與隱藏的標(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è)按鈕，用于隱藏自身，通過觸發(fā)父組件事件來修改父組件中dialog_visible的值。
用一張圖來表示父、子組件間數(shù)據(jù)雙向綁定的數(shù)據(jù)流向是：
如此便完成了Vue子組件的顯示與隱藏。
（最后吐槽一句，CSDN這markdown編輯器的代碼塊高亮都還不支持vue的語法，勉強(qiáng)用html語法的高亮代替…）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)詳解
記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印
使用electron開發(fā)應(yīng)用遇到了打印小票的功能,實(shí)現(xiàn)途中還是幾經(jīng)波折,下面這篇文章主要給大家介紹了關(guān)于electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對(duì)象本身（對(duì)象的增刪值）或者對(duì)象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見的示render函數(shù)2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁縮放滾動(dòng)問題）
本文主要介紹了Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁縮放滾動(dòng)問題），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue組件實(shí)例間的直接訪問實(shí)現(xiàn)代碼
在組件實(shí)例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪問,需要的朋友可以參考下2017-08-08
vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05