实现效果:通过点击选中的按钮控制左边的树是否进行展示

子组件篇:

        <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 子组件修改父组件传递过来的值的更多相关文章

  1. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  2. React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  3. vue2.0子组件修改父组件props数据的值

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...

  4. 14. VUE 子组件修改父组件的值

    在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...

  5. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  6. vue 子组件修改父组件变量问题

    昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...

  7. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  8. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  9. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

  10. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

随机推荐

  1. 【ClickHouse】5:clickhouse集群部署

    背景介绍: 有三台CentOS7服务器安装了ClickHouse HostName IP 安装程序 程序端口 centf8118.sharding1.db 192.168.81.18 clickhou ...

  2. c语言生成随机数

    记录示例,留作自用 #include <stdio.h> #include <stdlib.h> #include <time.h> int main(void) ...

  3. 灰色预测GM(1,1)模型的理论原理

    灰色预测是对时间有关的灰色过程进行预测.通过建立相应的微分方程模型,从而预测事物未来发展趋势的状况. 由于笔者的水平不足,本章只是概括性地介绍GM(1,1)模型的理论原理,便于对初学者的初步理解 目录 ...

  4. AIGC的行业发展

    1. AIGC的行业发展 AIGC(Artificial Intelligence Generated Content,人工智能生成内容)是利用人工智能技术来自动生成内容的一种新型内容创作方式.它基于 ...

  5. Redis学习篇

    Redis 能用来做什么? 01 缓存 Redis 的最常用的用例是缓存,以加快网络应用的速度.在这种用例中,Redis 将经常请求的数据存储在内存中.它允许网络服务器频繁访问的数据.这就减少了数据库 ...

  6. MySql 数据库、数据表操作

    数据库操作 创建数据库 语法 语法一:create database 数据库名 语法二:create database 数据库名 character set 字符集; 查看数据库 语法 查看数据库服务 ...

  7. 解决方案 | 外接键盘win+d失效,绿联键盘win+d,win+e失效

    按下fn + 右边的win键 即可解决.如下图所示.

  8. 基于 Impala 的高性能数仓实践之物化视图服务

    本文将主要介绍 NDH Impala 的物化视图实现. 接上篇,前两篇分别讲了执行引擎和虚拟数仓,它们是让一个 SQL 又快又好地执行的关键.但如果某些 SQL 过于复杂,比如多张大表进行 Join ...

  9. Swift开发基础07-内存布局

    了解Swift的内存布局和底层原理对于编写高性能和内存高效的应用非常重要.接下来,我将更详细地介绍Swift的内存管理机制和一些底层实现细节,包括内存布局.ARC(自动引用计数).引用类型和值类型的区 ...

  10. oeasy教您玩转vim - 80 - # 宏macro

    ​ 宏 macro 回忆 这次我们了解了编码格式 屏幕显示的encoding 文件保存的fileencoding 不能搞乱了 一般用什么编的就用什么解 解铃还须系铃人 打开不正确的话,就要切到正确的上 ...