Vue 使用v-model实现控制子组件显隐效果
更新时间：2023年11月06日 10:17:52 作者：Y_coder
v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧
v-model 可以实现双向绑定的效果，允许父组件控制子组件的显示/隐藏，同时允许子组件自己控制自身的显示/隐藏。以下是如何使用 v-model 实现这个需求：
在父组件中，你可以使用 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() {
// 子组件自己控制显示/隐藏状态
this.$emit('input', !this.value);
}
}
}
</script>在子组件中，通过 this.$emit('input', ...) 来触发 input 事件，这将影响父组件中 v-model 的绑定值。这样，父组件和子组件都可以独立地控制显示/隐藏状态，实现了双向绑定的效果。
到此这篇关于Vue 使用v-model实现控制子组件显隐的文章就介绍到这了,更多相关Vue 控制子组件显隐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
visible前面加冒号的，说明后面是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量，这篇文章主要介绍了vue-cli中的:visible.sync是什么,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue.js删除动态绑定的radio的指定项,需要的朋友可以参考下2017-06-06
vue+element-ui 校验开始时间与结束时间的实现代码
这篇文章主要介绍了vue+element-ui 校验开始时间与结束时间的代码实现,最主要的需求是开始时间不能早于当前时间,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要给大家介绍了关于Vue记住滚动条和实现下拉加载的完美方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
这篇文章主要为大家详细介绍了vue悬浮表单复合组件开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue.js 是一个用于构建用户界面的渐进式框架,本文主要为大家整理了一些常用的 Vue 方法及其详细说明和代码示例,有需要的小伙伴可以参考一下2023-11-11
这篇文章主要为大家介绍了Hooks对于Vue作用意义详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论