之前在用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. UITextView 实现链接点击事件

    UILabel通过富文本可以实现图文混排,但是想要实现文字的点击效果好像不容易实现,这里有2种方法可以达到效果 YYLabel -->YYText框架 参考我之前的博客:http://www.c ...

  2. 无锁atomicInteger

    AtomicInteger可以保证硬件上的原子操作 1.主要原理 CAS操作 在进行数据更新的时候,会进行与内存中的地址进行比较,若预期值与内存中的值相同,则进行数据上的更新,若值不同,则更新失败,  ...

  3. 五、 创建连接串连接本地数据库(ASP.NET MVC5 系列)

    1. 创建连接串连接本地SQLServer数据库 上节讲到MovieDBContext类,这个类的作用是连接数据库并将Movie对象迁移到数据库记录中.不过你会问一个问题:如何知道这个对象将连接哪个数 ...

  4. Dubbo微容器(Cooma)详解

    ExtensionLoader ExtensionLoader是Dubbo中的SPI的实现方法,它是Dubbo框架的微容器,也为框架提供各种组件的扩展点 三种注解 SPI Adaptive Activ ...

  5. 2D游戏开发(2)

    每次给游戏添加新功能时,通常也会引入一些新设置.为了让所有的设置进行统一管理,我们可以配置一个名为 setting的模块,这个模块中包含一个setting的类,用来存储所有的设置. #代码-- #!/ ...

  6. 用R语言做数据清理(详细教程)

    数据的清理 如同列夫托尔斯泰所说的那样:“幸福的家庭都是相似的,不幸的家庭各有各的不幸”,糟糕的恶心的数据各有各的糟糕之处,好的数据集都是相似的.一份好的,干净而整洁的数据至少包括以下几个要素: 1. ...

  7. TextView 实现跑马灯效果

    在String.xml中添加: <string name="txt">跑马灯效果,我跑啊跑</string>在layout/mian.xml中添加TextV ...

  8. python unittest 测试笔记(二):使用Requests

    1. Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用.[Python Requests快速入门 :]http://cn.python-requests.org/z ...

  9. SQL注入攻击[详解]

    SQL注入攻击是黑客对数据库进行攻击的常用手段之一.随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候, ...

  10. Eclipse之文件【默认编码格式设置】,防止乱码等问题

    文件默认编码格式设置步骤如下: 这里显示的是workspace的视图 其他格式文件的视图如下: