Vue父组件控制子组件的显示

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量2.2k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5a4214f551882538d31030db
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="showDiv()" >显示</button>
        <my-child v-show="bbb" @close="closeDiv()"></my-child>
    </div>
</body>
</html>
<script>
    var myChild={
        template:'<div>我的内容是可以切换的<button @click="closemyChild()">关闭</button></div>',
        data:function(){
            return{}
        },
        // props:['showif'],
        methods:{
            closemyChild(){
                this.$emit('close');
            }
        }
    }
    new Vue({
        el:'#app',
        components:{
            'my-child':myChild
        },
        data:function(){
            return{
                bbb:false
            }
        },
        methods:{
            showDiv:function(){
                this.bbb=true;
            },
            closeDiv:function(){
                this.bbb=false;
            }
        }
    })
</script>
复制代码

思路：子组件点击按钮事件$emit父组件

weixin_33910434
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 设置组件显示与否_Vue控制子组件的显示隐藏的四种办法
weixin_29174141的博客
01-30 4919
1. v-model//使用// data 中 model :false// 子组件DOMexport default {props: {value: { type: Boolean, default: false },},data() {return {};},methods: {ConfirmHandler() {this.$emit("input", false);this.$emit(...
Vue中的父子组件传值从父组件控制子组件的显示
qq_36355178的博客
03-11 5424
今天在工作遇到了一个小问题,需求是在一个vm实例中创建一个组件,是一个弹框,我使用了组件来做这个弹框.在父组件中有一个按钮点击显示子组件. 当子组件显示的时候,子组件左上角有一个× 点击可以关闭他,一开始我是这么做的: 在父组件上定义一个变量,默认为false ,然后使用v-show来控制子组件的显示和隐藏 当子组件显示的时候在子组件上定义变量,默认为true,当点击 ×的时候改变这个变量为fa...
vue封装弹窗组件,父组件控制显示隐藏
闫的博客
10-08 1466
vue封装弹窗组件,父组件控制显示隐藏
Vue.js 中父组件调用子组件的方法
Yeats_Liao的博客
01-31 1269
Vue.js 中父组件调用子组件的方法
vue中父组件控制子组件的显示隐藏
m0_63466615的博客
07-29 4780
vue中父组件控制子组件的显示隐藏
父组件内部接口调用 或 父组件加载 完后再加载子组件；控制子组件的加载时机
qq_45327886的博客
10-24 3099
父组件中嵌套子组件时，控制子组件的加载时机；父组件加载完后再加载子组件
Vue子组件调用父组件的方法
weixin_45267702的博客
12-07 746
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法，这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export de
vue 父组件调用子组件方法及事件
08-27
Vue 父组件调用子组件方法及事件 在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。 父组件调用子组件方法 在上面的...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue里面父组件修改子组件样式的方法
08-28
Vue 中父组件修改子组件样式的方法 在 Vue 开发中，经常会遇到父组件修改子组件样式的问题。由于 scoped 属性的存在，父组件的样式无法渗透到子组件中。那么，如何让父组件修改子组件的样式呢？下面将分享三种方法...
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue父组件调用子组件事件方法
08-27
这里我们将详细介绍两种常见的Vue父组件调用子组件事件方法。 首先，我们需要理解Vue中的事件机制。Vue采用自定义事件系统来处理组件间的通信，这被称为“事件驱动”编程。组件可以通过`$emit`方法触发事件，而其他...
Vue父组件控制子组件里面某item的显示与隐藏
nyf_unknow的博客
04-24 4715
项目场景： 知识产权模块 问题描述 子组件的新增和编辑弹窗共用，现需编辑弹窗隐藏文件上传 解决思路： 1.点击子组件编辑按钮： @click=“handleEdit(record)” 2.在子组件methods中传递数据给父组件： this.$emit(“handleEdit”,“编辑”) 3.在父组件的子组件标签中接收： <propertyMonograph @handleEdit=“handleEdit” /> 4.在父组件的data中定义显示与隐藏的初始值： fileHidden
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 3066
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
Vue子组件的显示与隐藏
az44yao的专栏
02-18 4347
在使用Vue开发前端页面的过程中，经常都会遇到需要在父组件中控制子组件的显示/隐藏，比如弹出窗口。在第一步中，我们通过在父组件中修改dialog_visible的值，来控制子组件的显示/隐藏，非常简单。子组件中增加了一个按钮，用于隐藏自身，通过触发父组件事件来修改父组件中dialog_visible的值。原理上很简单，其实就是在子组件中，修改父组件中的dialog_visible参数嘛。这一步首先实现在父组件通过v-show对子组件的显示/隐藏进行控制。而下一步，我们还需要实现在子组件中隐藏（关闭）自己。
vue父组件控制子组件显示隐藏的问题
热门推荐
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
04-14 1万+
问题代码： 父组件代码 <template> <div class="parent"> <button @click="showPanel">显示弹窗</button> <v-popup v-show="panelShow" :panelShow="panelShow"></v-popu...
vue+vux 父组件控制子组件弹层
weixin_30709929的博客
06-13 261
知识点用到了vue父子组件之间的传值，以及使用watch和v-model控制vux中XDialog组件。 需要注意的问题: 1.父组件向子组件传值使用的是props（单向传值），子组件创建props，然后创建一个名为invitor的属性，父组件对其赋值即可，但是单向传值，子组件不能通过改变props的属性，直接去改变父组件的值。 2.子组件向父组件传值，实际是在父组件自定义了一个事件，子组件...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 384
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue父组件控制子组件值
09-28
父组件可以通过props将值传递给子组件，然后在子组件中使用props接收这个值。在父组件中使用v-bind指令将值绑定到子组件的props上，在子组件中定义props来接收父组件传递的值。这样就可以实现父组件控制子组件的值了。 在您提供的代码中，父组件使用v-bind将dlshow的值传递给子组件的nr属性。子组件中定义了nr作为props来接收这个值。当父组件中的parentButtonClick方法被调用时，会改变dlshow的值为true，从而影响子组件的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值