快捷導(dǎo)航

Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱效果

更新時(shí)間：2023年11月06日 10:17:52 作者：Y_coder

v-model 可以實(shí)現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時(shí)允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧

v-model 可以實(shí)現(xiàn)雙向綁定的效果，允許父組件控制子組件的顯示/隱藏，同時(shí)允許子組件自己控制自身的顯示/隱藏。以下是如何使用 v-model 實(shí)現(xiàn)這個(gè)需求：

在父組件中，你可以使用 v-model 來(lái)雙向綁定一個(gè)變量，這個(gè)變量用于控制子組件的顯示/隱藏：

<template>
  <div>
    <button @click="toggleChild">Toggle Child Component from Parent</button>
    <ChildComponent v-model="showChild" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: false
    };
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
    }
  }
}
</script>

在子組件中，你需要定義一個(gè)名為 value 的 props，以便接收來(lái)自父組件的 v-model 綁定：

<template>
  <div>
    <button @click="toggleSelf">Toggle Myself</button>
    <div v-if="value">I'm the Child Component</div>
  </div>
</template>
<script>
export default {
  props: {
    value: Boolean
  },
  methods: {
    toggleSelf() {
      // 子組件自己控制顯示/隱藏狀態(tài)
      this.$emit('input', !this.value);
    }
  }
}
</script>

在子組件中，通過(guò) this.$emit('input', ...) 來(lái)觸發(fā) input 事件，這將影響父組件中 v-model 的綁定值。這樣，父組件和子組件都可以獨(dú)立地控制顯示/隱藏狀態(tài)，實(shí)現(xiàn)了雙向綁定的效果。

到此這篇關(guān)于Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱的文章就介紹到這了,更多相關(guān)Vue 控制子組件顯隱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue中使用Swiper簡(jiǎn)單封裝組件示例
這篇文章主要為大家介紹了Vue中使用Swiper簡(jiǎn)單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue組件實(shí)現(xiàn)列表自動(dòng)無(wú)限循環(huán)的方法
最近剛好有個(gè)功能需要實(shí)現(xiàn)列表的無(wú)限循環(huán)滾動(dòng),這篇文章主要給大家介紹了關(guān)于vue組件實(shí)現(xiàn)列表自動(dòng)無(wú)限循環(huán)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue-cli中的:visible.sync是什么意思
visible前面加冒號(hào)的，說(shuō)明后面是一個(gè)變量或者表達(dá)式；沒(méi)加冒號(hào)的后面就是對(duì)應(yīng)的字符串字面量，這篇文章主要介紹了vue-cli中的:visible.sync是什么,需要的朋友可以參考下
2022-11-11
vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下
2017-06-06
vue+element-ui?校驗(yàn)開(kāi)始時(shí)間與結(jié)束時(shí)間的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element-ui?校驗(yàn)開(kāi)始時(shí)間與結(jié)束時(shí)間的代碼實(shí)現(xiàn),最主要的需求是開(kāi)始時(shí)間不能早于當(dāng)前時(shí)間,感興趣的朋友跟隨小編一起看看吧
2024-07-07
Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法
這篇文章主要給大家介紹了關(guān)于Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue懸浮表單復(fù)合組件開(kāi)發(fā)詳解
這篇文章主要為大家詳細(xì)介紹了vue懸浮表單復(fù)合組件開(kāi)發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue中常用方法的用法匯總
Vue.js?是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細(xì)說(shuō)明和代碼示例,有需要的小伙伴可以參考一下
2023-11-11
Hooks對(duì)于Vue作用意義詳解
這篇文章主要為大家介紹了Hooks對(duì)于Vue作用意義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06