之前在用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. Error:No such property: GROUP for class: org.gradle.api.publication.maven.internal.deployer.DefaultGroovyMavenDeployer

    注:参考:http://stackoverflow.com/questions/28450549/errorno-such-property-group-for-class-org-gradle-ap ...

  2. 那些年,让我们一起着迷的Spring

    构建企业级应用框架(SpringMVC+Spring+Hibernate/ibatis[Mybatis]) 框架特点:半成品,封装了特定的处理流程和控制逻辑,成熟的,不断升级的软件.重用度高,开发效率 ...

  3. 记一次亲身踩过的hibernate的bug

    记一次亲身踩过的hibernate的bug 在写实体类时,经常会对域增加校验,例如@NotNull表示哪个字段不能为空,昨天晚上调试代码,就遇到了问题, @Entity public class Ap ...

  4. 微信小程序实战(商城)

    github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...

  5. Maven学习(五)

    使用Maven构建多模块项目 一般的web项目构成: 建立解决方案目录parent 首先使用命令进入到我们需要建立maven项目的目录: mvn archetype:generate -DgroupI ...

  6. docker核心概念及centos6下安装

    Docker三大核心概念 镜像 容器 仓库 镜像 docker镜像类似于虚拟机镜像,可以将它理解为一个面向Docker引擎的只读模板,包含了文件系统. 容器 1.容器是从镜像创建的应用运行实例,容器和 ...

  7. 写给Android App开发人员看的Android底层知识(6)

    (十一)BroadcastReceiver BroadcastReceiver,也就是广播,简称Receiver. 很多App开发人员表示,从来没用过Receiver.其实吧,对于音乐播放类App,用 ...

  8. python基础学习笔记

    #!/usr/bin/env python #coding=utf-8 def login(username): if username=='bill': return 1 else: return ...

  9. Java 后台创建word 文档

    ---恢复内容开始--- Java 后台创建 word 文档 自己总结  网上查阅的文档 分享POI 教程地址:http://www.tuicool.com/articles/emqaEf6 方式一. ...

  10. Eclipse导入项目常见问题----facet版本问题04

    问题如下: 解决办法 右击项目,找到最下面的properties,在搜索facet jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37107022/art ...