之前在用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. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  3. org.apache.commons.lang下的工具类

    1.org.apache.commons.lang.ArrayUtils 例子 package chongqingyusp; import java.util.Map; import org.apac ...

  4. Lua学习(1)——table

    table类型实现了“关联数组”.“关联数组”是一种具有特殊索引方式的数组.不仅可以通过证书来索引它,还可以使用字符串或其他类型(除了nil)来索引它.table是Lua中主要的数据结构机制(事实也是 ...

  5. MySql学习笔记(五) —— 存储过程

    存储过程是MySql 5支持的特性,它是一组为了完成特定功能的SQL语句集,经过编译之后存储在数据库中,当需要使用该组SQL语句时用户只需要通过指定储存过程的名字并给定参数就可以调用执行它了,简而言之 ...

  6. haproxy-代码阅读-内存管理

    haproxy内存池概述 内存池按照类型分类,每个类型的内存池都有一个名字,用链表记录空闲的内存块,每个内存块大小相等,并按照16字节对齐. haporxy用pool_head 结构记录内存池 str ...

  7. Zepto源码分析-zepto模块

    源码 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT lic ...

  8. int 与 int *

    #include <iostream>using namespace std;int QKPass(int* , int , int);  //若声明为 int QKPass(int, i ...

  9. 提高code效率

    分享下个人编码挫折,关于提高编码效率.代码规范.清晰的代码模块顺序.及时总结代码(提取出可复用的)以及清晰的注释,这是我感觉有必要的,因为工作到后期,代码量都非常的大.就是上个周5那天的整体工作效率都 ...

  10. “海市蜃楼”般的逛街体验——VR全景智慧城市常诚

    <史记·天官书>:"海旁蜃气像楼台:广野气成宫阙然." 海市蜃楼,简称蜃景,是一种因为光的折射和全反射而形成的自然现象,是地球上物体反射的光经大气折射而形成的虚像. 2 ...