vue子父组件通信

时间:2022-04-30 12:10:55

之前在用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第六单元&lpar;react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参&rpar;

    第六单元(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 子父组件之间的通信,及在调用组件的地方

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

  9. Vue的父子组件通信(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

随机推荐

  1. C&num;的索引器

    using System; using System.Collections; using System.Collections.Generic; using System.IO; namespace ...

  2. JQuery上传文件插件Uploadify使用笔记

    新工作的第一份任务就是给实现 限制Uploadify 上传文件格式为图片 测试出来报错,选择了非图片文件,提示错误后,再选择其他文件,上传时还是包含了之前清空的非图片文件 最后实现效果的代码是 //上 ...

  3. zabbix添加邮件报警机制

    zabbix添加邮件报警机制 作者:尹正杰 还记得之前跟大家聊过的一个如何监控一个目录的话题吗?我们虽然监控出来数据了,也有数据了,但是,只是监控也没有用啊~因为我们不能24小时盯着屏幕然后 出了事情 ...

  4. 如何在Java客户端调用RESTful服务

    在这个例子中,我们将看到如何使用java.net包实用工具,创建一个访问REST服务RESTful的客户端.当然这不是创建一个RESTful客户端最简单的方法,因为你必须自己读取服务器端的响应,以及J ...

  5. request 报错The remote server returned an error&colon; &lpar;415&rpar; Unsupported Media Type&period;

    开发时遇到个问题,程序访问数据库数据,给服务器发送请求时,老是报错,返回的错误页面是: HTTP Status 415 - Unsupported Media Type type Status rep ...

  6. iPhone应用中如何避免内存泄露?

    如何有效控制iPhone内存管理的对象的所有权与引用计数和以及iPhone内存的自动释放与便捷方法.本文将介绍在iPhone应用中如何避免内存泄露.想了解“在iPhone应用中如何避免内存泄露”就必须 ...

  7. 搭建本地 Registry - 每天5分钟玩转 Docker 容器技术(20)

    Docker Hub 虽然非常方便,但还是有些限制,比如: 需要 internet 连接,而且下载和上传速度慢. 上传到 Docker Hub 的镜像任何人都能够访问,虽然可以用私有 reposito ...

  8. OpenCV进行图像相似度对比的几种办法

    转载请注明出处:http://blog.csdn.net/wangyaninglm/article/details/43853435, 来自:shiter编写程序的艺术 对计算图像相似度的方法,本文做 ...

  9. WAMP中的MySQL设置用户、密码 及 phpmyadmin的配置

    打开localhost和phpadmin时注意是否改过端口(这两个的默认端口是80) 初始用户名:root   密码为空 改密后使用新密码. WAMP中的 mysql设置密码(默认密码为空)及 php ...

  10. div中让内容能不换行就尽量不换行&period;【纯原】

    div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...