Vue 子组件修改父组件传递过来的值
实现效果:通过点击选中的按钮控制左边的树是否进行展示

子组件篇:
<el-button v-if="isShowTree&hasTree" type="text" icon="btn-arrow iconfont icon-icon_arrow_left" style="margin-left:-30px;margin-top:-15px;position:absolute" @click="isShow()"></el-button>
<el-button v-if="!isShowTree&hasTree" type="text" icon="btn-arrow iconfont icon-icon_arrow_right" style="margin-left:-25px;margin-top:-15px;position:absolute" @click="isShow()"></el-button>
属性接收传递过来的变量:

定义触发改变父组件传递过来的值的事件:通过this.$emit()的方式调用父组件的方法达到改变子组件修改父组件传递过来值的效果
this.$emit()可以传递多个参数,第一个参数是调用的方法名,后面的则是你调用方法所需传递的参数
isShow(){
this.$emit("isShow");
}
父组件篇:
<filter-Form :isShowTree="isShowTree" :hasTree="hasTree" @isShow="isShow" ></filter-Form>
data中定义数据类型:
methods中定义点击事件的方法:
isShow(){
this.isShowTree=!this.isShowTree;
}
Vue 子组件修改父组件传递过来的值的更多相关文章
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...
- vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...
- 14. VUE 子组件修改父组件的值
在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...
- vue 子组件修改父组件传来的props值,报错
vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...
- vue 子组件修改父组件变量问题
昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- vue—子组件修改父组件的值
如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...
- Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
随机推荐
- 海思SDK 学习 :000-海思HI35xx平台软件开发快速入门之背景知识
背景 参考自:<HiMPP V3.0 媒体处理软件开发参考.pdf> 由于在音视频处理领域,海思芯片占有全球市场的很大份额.当我们选择使用海思芯片开发时,程序开发模型主要是围绕HIMPP( ...
- Python读取YAML配置数据
python编写的一些脚本需要一些简单配置时可以使用yaml文件进行设置.本文将介绍如何使用pyyaml进行读取配置数据. 首先安装pyyaml pip install pyyaml 简单使用下pyy ...
- 在Mac上使用Emacs初步
其他操作系统估计也差不多. 安装 如果使用brew就是brew install emacs.安装后不会在Applications里面显示一个程序,需要在命令行里执行emacs. 使用 进入和退出 上面 ...
- debian12 创建本地harbor镜像库
前言 harbor是一个docker/podman镜像管理库,可用于存储私人镜像.现将本人在debian12系统搭建harbor镜像库的过程记录下来,留作后续参考. 可以参考github harbor ...
- Me-and-My-Girlfriend-1靶机渗透流程
Me-and-My-Girlfriend-1 靶机下载 Description: This VM tells us that there are a couple of lovers namely A ...
- new操作符具体干了什么呢?
new操作符的作用如下: 1.创建一个空对象2.由this变量引用该对象3.该对象继承该函数的原型4.把属性和方法加入到this引用的对象中5.新创建的对象由this引用,最后隐式地返回this.过程 ...
- 薅 AWS 羊毛的船新方式,以 ChatBot 为例
还在担心一年免费服务器到期后该怎么办?(Solo社区 投稿) 网上绝大多数薅 AWS 羊毛的教程都是在教大家如何申请创建一年免费的 VPS,太 OUT 了!就问一个问题,一年到期了那咋办? 其实,除了 ...
- Tiny RDM 刚上线就收获一众好评的Redis桌面开源客户端!值得拥有!
相信对Redis有频繁操作需求的用户,大部分会选择一个顺手的图形化界面工具来代替手动命令行操作以提高效率.Tiny RDM作为一款现代化轻量级的跨平台Redis桌面客户端,为用户提供了便捷高效的Red ...
- 2024 暑假友谊赛-热身2 (7.12)zhaosang
E-E https://vjudge.net/problem/AtCoder-diverta2019_b 给你 a, b, c ,n就是问你有多少(ia+jb+k*c)等于n的答案i,j,k任意几个都 ...
- CF30D King's Problem? 题解
CF30D 题意 有 \(n+1\) 个点,其中的 \(n\) 个点在数轴上.求以点 \(k\) 为起点走过所有点的最短距离,允许重复. 思路 有两种情况: \(k\) 在数轴上(如图1). \(k\ ...