之前在用vue写子父组件通信的时候,老是遇到问题!!!

子组件传值给父组件:
  子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法   
  模板:
    <div v-on:click="switchViewBtn">切换视图</div>
  在data中定义:switchStatus = true;
  方法:
    switchViewBtn(){
      let that=this;
      this.$emit("parentView",that.switchStatus);
    },
  父组件:模板: 
    <div @parentView="changeView" :msg="msg"></div>
  方法:
  changeView(msg){
    this.switchStatus = msg;
  }
  这样就可以将子组件的值传给父组件了。
 
父组件传值给子组件:
  父组件:模板:
  <div :name="name">切换视图</div>
  在data中赋值:
    export default {
      data() {
        return {
          data:‘zy’
         }
      }
    }
 
子组件中接受代码:
  export default {
    data() {
      return {
        data:‘zy’
        }
      },
    props:[
       'name'
    ]
  }

vue子父组件通信的更多相关文章

  1. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

  2. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  3. vue之子父组件通信

    一. 子-父组件间通信: let children = {    # 定义子组件 template: `<div> <button @click="send"&g ...

  4. Vue子父组件方法互调

    讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助. 父组件调用子组件方法: 1.设置子组件的ref,父组件 ...

  5. vue子父组件的通信

    Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0中去除了$broadcast和$dispatch方法. 1.父组件向子组件传值 a.app.vue父组件 <templ ...

  6. vue --子父组件传值

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( e ...

  7. vue子父组件传值

    https://blog.csdn.net/weixin_38888773/article/details/81902789 https://blog.csdn.net/jsxiaoshu/artic ...

  8. Vue子->父组件传值

    父组件引入: Import Test from'' 父页面使用: <Test ref="test" @m1="m2"><Test/> 子 ...

  9. vue 子父组件之间的通信,及在调用组件的地方

    这里是用了 element ui 你们也可以看一下管方的文档 http://element.eleme.io/#/zh-CN/component/installation 组件html <div ...

随机推荐

  1. Kotlin学习第一课:从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  2. 从SonarQube谈设计模式

    SonarQube SonarQube是用来检测代码质量的,但类似工具的推广常常遇到阻碍. 成型项目或僵尸项目可以理解,项目优化需要投入的人力成本和时间成本太大,而且最主要的是无法保证改动过程中不引入 ...

  3. python unittest 测试笔记(一)

    测试最基本的原理就是比较预期结果是否与实际执行结果相同,如果相同则测试成功,否则测试失败. python 单元测试官方文档: [Python: 2.7] (https://docs.python.or ...

  4. java将类和函数封装成jar,然后在别的项目中使用这个jar包

    本来想用idea安装的,不过用maven生成后发现jar有20,30M肯定不对,后来还是用eclipse生成了,方便很多 环境: eclipse luna,jdk1.8_112 1.生成jar包,首先 ...

  5. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  6. canvas实现视频截图

    截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...

  7. FLAnimatedImageView处理gif过程

    FLAnimatedImageView处理gif过程 时间控制原理 GIF图片每一帧的delayTime可能都不一样: 在展示下一帧的时间控制机制,不能根据以第一帧为准: 或总动画时长除以帧数来简单做 ...

  8. xssless - 自动化的XSS payload攻击器

    XSSLESS 一个用Python编写的自动化XSS 负载(payload)攻击器 用法: 记录请求 并结合Burp proxy 选择你想生成的请求,然后右键选择“保存项目” 使用xssless生成你 ...

  9. Spring学习(20)--- Schema-based AOP(基于配置的AOP实现) -- 配置切入点pointcut

    pointcut(切断点)表达式: execution(public * *(..)) execution(* set*(..)) execution(* com.xyz.service.Accoun ...

  10. JavaScript函数之递归

    递归 递归的本质就是使用函数自身来解决问题的思路. 递归的定义(摘): 程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明 ...