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

子组件篇:

        <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. uniapp+thinkphp5实现微信登录

    前言 之前做了微信登录,所以总结一下微信授权登录并获取用户信息这个功能的开发流程. 配置 1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecret https:// ...

  2. 浏览器中JS的执行

    JS是在浏览器中运行的,浏览器为了运行JS, 必须要编译或解释JS,因为JS是高级语言,计算机不认识,必须把它编译或解释成机器语言,其次,在运行JS的过程,浏览器还要创建堆栈,因为程序是在栈中执行,执 ...

  3. mac idea代码颜色修改、主题

    下载样式包 下载样式 网址一:http://www.riaway.com/ 网址二:http://www.themesmap.com/theme.html?t=down 我使用的这几款 链接: htt ...

  4. c 语言学习第三天

    字符和字符串 字符 当我们定义了一个字符变量 c 为a时,打印的时候让它使整数形式显示.会出现怎么一个情况? #include<stdio.h> int main(){ char c = ...

  5. 洛谷P1057

    #include<iostream> #include<utility> using namespace std; typedef long long ll; #define ...

  6. Java-C3P0和Druid连接池的运用

    1.概念 其实就是一个容器(集合),存放数据库连接的容器 当系统初始化好后,容器被创建,容器会申请一些连接对象,当用户来访问数据库时,从容器中获取连接对象,用户访问完之后,会将连接对象归还给容器. 好 ...

  7. 靶机: AdmX_new

    靶机: AdmX_new 准备阶段 靶机:https://download.vulnhub.com/admx/AdmX_new.7z 下载后进行 MD5:2948034da23a8acc1285fd4 ...

  8. ABC352

    A link \(x\)停不到,\(y\)能停到. 要先判断是从前往后还是从后往前. 点击查看代码 #include<bits/stdc++.h> using namespace std; ...

  9. 智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA

    背景 最近长沙的天气暴热,室内达到了34-35度,天气预报最高温度上了40度,这么酷热的天气,离开了空调,基本上就是一身汗,全身湿透,特别难受,然后不得不开启家里的一台将近10年的老式定频空调,输入功 ...

  10. Python列表、元组、字典和集合的用法

    1.列表 标志符号是[],元素可以修改.删除和新增 1.1 提取元素(索引从0开始计算) testList=['A','B','C',1,'D'] print(testList[1]) #打印索引区间 ...