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" ...
随机推荐
- STM32 CubeMX 学习:004-PWM
背景 上一讲,我们介绍了 STM32 CubeMX 学习:定时器 ,并示范了如何使用定时器来定时.这一讲我们来试试PWM(Pulse Width Modulation, 脉冲宽度调制),这是利用微处理 ...
- ubuntu 安装 arm-none-eabi-gcc 的几种方式
背景 这篇文章主要是为了解决 在 Linux 中 编译 能够在 裸机上 跑的 程序 目前许多嵌入式软件软件开发在Linux平台下进行,编译效率高很多,如今天所述的gcc-arm-none-eabi常适 ...
- C# Newtonsoft增删改查(本地存储)(简单便捷)(拿来即用)
调用方法: LocalSetupHelper.SetData(Sss.维护, "密码", "123456"); //保存 var c=LocalSetupHel ...
- 关于docker-compose up -d 出现超时情况处理
由于要搭建一个ctf平台,用docker一键搭建是出现超时情况 用了很多办法,换源,等之类的一样没办法,似乎它就是只能用官方那个一样很怪. 只能用一种笨办法来处理了,一个个pull. 打个比如: 打开 ...
- 【论文阅读】TRO2022: A Two-Stage Optimization-Based Motion Planner for Safe Urban Driving
TRO2022: A Two-Stage Optimization-Based Motion Planner for Safe Urban Driving Summary: 探讨planning过程中 ...
- Jingle Bio:产品出海的最重要一课是「重营销轻技术」?
名字: Jingle Bio 开发者 / 团队: Luo Baishun 平台: Web 请简要介绍下这款产品 Jingle Bio 是一款不需要任何编程基础就可以轻松驾驭的个人网站制作工具,你可以使 ...
- 题解:CF1971D Binary Cut
题解:CF1971D Binary Cut 题意 给予你一个 \(01\) 字符串,你可以将它分割,分割后必须排成先 \(0\) 后 \(1\) 的格式. 求最少分割为几部分. 思路 将 \(0\) ...
- 开源新纪元:Llama 3.1超大杯405B跑分惊艳,首次超越GPT-4o,下载链接曝光!
开源巨擘Llama 3.1崭露头角,性能卓越引发热议 在科技界的瞩目下,Llama 3.1系列模型以其卓越的性能脱颖而出,尤其是其405B超大杯版本,在微软Azure-ML GitHub平台的多项评测 ...
- 使用threejs实现3D卡片菜单
成品效果: 用到的技术:vue2.three.js.gsap.js template <template> <div id="box" class="c ...
- Java代码实现七夕魔方照片墙
创建一个七夕魔方照片墙是一个相对复杂的任务,涉及到前端展示和后端数据处理.在这里,我会提供一个简化的Java后端示例,用于生成一个模拟的"照片墙"数据模型,并给出一个基本的前端HT ...