Vue子组件的显示与隐藏
文章目录
- Vue子组件的显示与隐藏
- 第一步 使用v-show
- 1.1 父组件
- 1.2 子组件
- 2 第二步 父子组件传参
- 2.1 父组件
- 2.2 子组件
- 第一步 使用v-show
Vue子组件的显示与隐藏
另外我自己也是一个前端小白,为了更方便大家理解,我将代码拆分成了两个步骤:
第一步 使用v-show
这一步首先实现在父组件通过v-show对子组件的显示/隐藏进行控制。
父组件中有显示/隐藏按钮,点击后显示/隐藏子组件,效果如下:
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 {// 控制子组件显示与隐藏的标识,类型为Booleandialog_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指令会通过切换CSS中display属性的值,使对应元素显示/隐藏。
简化了click方法,将显示/隐藏按钮的点击事件写到了一起。
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的值,来控制子组件的显示/隐藏,非常简单。
原理上很简单,其实就是在子组件中,修改父组件中的dialog_visible参数嘛。
2.1 父组件
<template><div class="contain"><p>这里是父组件页面</p><button @click="showDialog(true)">显示</button><button @click="showDialog(false)">隐藏</button><!-- 新增了向子组件传递的参数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 {// 控制子组件显示与隐藏的标识,类型为Booleandialog_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>
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() {// 触发父组件中的dialogVisibleEvent事件,并传递参数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>
子组件中增加了一个按钮,用于隐藏自身,通过触发父组件事件来修改父组件中dialog_visible的值。
转自:https://blog.csdn.net/qq_34802416/article/details/89302496
Vue子组件的显示与隐藏相关推荐
- vue父组件引用子组件方法显示undefined问题原因及解决方法
vue父组件引用子组件方法显示undefined问题原因及解决方法 参考文章: (1)vue父组件引用子组件方法显示undefined问题原因及解决方法 (2)https://www.cnblogs. ...
- vue子组件mounted不执行_vue中父子组件传值,解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...
- vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转
开始 vue中子组件这一块,有点麻烦.不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫 下面假设: 路由配置文件为:router.js 父组件为 paren ...
- Android_组件的显示与隐藏
组件的显示与隐藏 1.Activity.java package com.text; import android.app.Activity; import android.os.Bundle; ...
- Vue子组件绑定事件无效
Vue子组件绑定事件无效 解决方法:在@click后面加上native <el-radio-group v-model="selectFastTime" size=" ...
- vue子组件mounted不执行_vue 页面回退mounted函数不执行的解决方案
前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...
- vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
- Vue子组件重新渲染
vue 子组件V-IF刷新(一般) 组件会根据v-if刷新 <item-one v-if="isref" ref="itemOne"></it ...
- vue怎么根据id获取组件_vue子组件,如何根据父组件传进来的id,去查询详情,并在子组件中显示?...
如果我在组件的created方法里面,根据id去后台查询详情,可以正常显示,不报错,但是当父组件id值改变后,并不会再次去后台查询了, ,假如我后台返回的对象时detail,如果写在computed里 ...
最新文章
- python 遍历字符串的每一个字符_Python之字符串的遍历的4种方式
- 用脑机接口创作音乐,将音乐与思想进行合成
- mysql explain 分析中select_type列解释
- mysql不同的类的个数_Mysql数据库-SQL优化-统计某种类型的个数
- linux虚拟化桌面协议,桌面虚拟化传输协议之android spice
- 记录一次nginx502/504问题解决过程
- Javascript 日期校验完备全过程
- 实习成长之路——设计模式实战二:如何使用面向对象的思想设计一个功能需求?接口鉴权怎么用面向对象分析实现?
- java 身份证地址提取籍贯_输入身份证号获取籍贯、出生日期、性别
- 惯量比多少合适_惯量比折算问题
- 收藏备用丨CAD快捷键大全
- Node - 从0基础到实战企业官网
- 【Unity好用插件】PSD文件转UI插件——Psd 2 Unity uGUI Pro ★★★完整过程
- 为什么我的背景图片加载不出来
- 卷积神经网络(2)--卷积神经网络的认识、黑白图像的卷积操作
- 【夜读】做好这6件事,让人受益一生
- cad能整体比例缩小吗_cad怎么把原尺寸图缩小几倍
- 小型数控钻铣床C31
- icmp type code 对应表
- 震惊!催眠居然可以这么简单!
热门文章
- androidstudio 编译apk时出现Error while Launching activity错误
- 解决ORA-00904: invalid identifier
- 40亿美金史上最大 ICO,EOS 疑云
- 绕过知乎网页版禁止转载限制进行复制
- 什么样的代码是好代码_什么使好代码3 7
- 我和电赛的成长故事与总结#2019年全国大学生电子设计竞赛#
- 【标签画像系列】标签体系建设方法论
- ↖杨过↖ ↗小龙女↗
- 鹏鹏的Altium Designer快捷方式技巧--库文件的制作
- 重磅:阿里开启大规模校招,传已启动保密项目