Vue 使用v-model實現(xiàn)控制子組件顯隱效果
更新時間：2023年11月06日 10:17:52 作者：Y_coder
v-model 可以實現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧
v-model 可以實現(xiàn)雙向綁定的效果，允許父組件控制子組件的顯示/隱藏，同時允許子組件自己控制自身的顯示/隱藏。以下是如何使用 v-model 實現(xiàn)這個需求：
在父組件中，你可以使用 v-model 來雙向綁定一個變量，這個變量用于控制子組件的顯示/隱藏：
<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>在子組件中，你需要定義一個名為 value 的 props，以便接收來自父組件的 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>在子組件中，通過 this.$emit('input', ...) 來觸發(fā) input 事件，這將影響父組件中 v-model 的綁定值。這樣，父組件和子組件都可以獨立地控制顯示/隱藏狀態(tài)，實現(xiàn)了雙向綁定的效果。
到此這篇關(guān)于Vue 使用v-model實現(xiàn)控制子組件顯隱的文章就介紹到這了,更多相關(guān)Vue 控制子組件顯隱內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何實現(xiàn)對請求參數(shù)進行簽名問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
發(fā)布-訂閱模式是一種設(shè)計模式,通過事件中心實現(xiàn)對象間的解耦通信,在Vue中,Vue2使用Vue實例作為事件總線,Vue3推薦使用mitt庫,發(fā)布-訂閱模式適用于廣播通知、解耦組件和復(fù)雜狀態(tài)管理,在選擇工具時,建議根據(jù)場景選擇合適的工具2025-11-11
本文主要介紹了Element Timeline時間線的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue2 前后端分離項目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
使用vue2.0實現(xiàn)自定義彈窗指令，當(dāng)標(biāo)簽有該指令時，點擊標(biāo)簽可以彈出彈窗。下面通過實例代碼給大家介紹Vue自定義彈窗指令的相關(guān)知識，感興趣的朋友一起看看吧2018-08-08
項目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實現(xiàn)的，但是數(shù)據(jù)增多就會需要做分頁處理，本文主要介紹了vue對el-autocomplete二次封裝增加下拉分頁，感興趣的可以了解一下2022-03-03
詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法，在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)，有興趣的可以了解一下。2017-01-01
錯誤處理是框架設(shè)計的核心要素之一,框架的錯誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開發(fā)應(yīng)用時處理錯誤的心智負(fù)擔(dān),本文將從源碼入手,剖析一下Vue3中是如何進行錯誤處理的,需要的可以參考下2024-01-01
Upload?上傳文件這個功能是我們在企業(yè)實際開發(fā)當(dāng)中使用頻率是非常高的這樣一個文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧2024-02-02