欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年09月09日 11:12:41   作者：Rhine404  
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

子組件的顯示與隱藏

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

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

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

完整的代碼在2.1與2.2中。

第一步 使用v-show

這一步首先實(shí)現(xiàn)在父組件通過v-show對子組件的顯示/隱藏進(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)識，類型為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屬性的值，使對應(yīng)元素顯示/隱藏。

簡化了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的值，來控制子組件的顯示/隱藏，非常簡單。

而下一步，我們還需要實(shí)現(xiàn)在子組件中隱藏（關(guā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)識，類型為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)文章

最新評論