下图是父元素:

下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set 、place、type,拿到值就可以做一些自己的逻辑处理

二、子元素给父元素传值?
下图为子元素将值传递出去的方式,使用emit将值公布给父元素,见下图:

父元素需要接受子元素给的值,在父元素中相应的要有propMethods属性,这个属性可以使用v-on的方式绑定,也可以使用@propMethods的方式,见下图:

上图中的login是处理事件,这里点击按钮时需要子元素来触发事件,所以需要父元素根据子元素传过来的的属性来做一些逻辑处理,下图就是父元素login事件的处理逻辑写在login.vue里

二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值的更多相关文章

  1. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  2. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  3. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  4. Vue学习笔记-rest_framework_jwt 学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  5. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  6. Vue学习笔记-vue-element-admin 按装报错再按装

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  7. Vue学习笔记-API调试工具--->国产apipost按装(比postman好按装好用)

    一  使用环境: windows 7 64位操作系统 二   Vue学习笔记-API调试工具--->apipost按装 1.下载: https://www.apipost.cn/ (比postm ...

  8. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  9. vue学习记录⑤(组件通信-父与子)

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  10. 关于Vue父组件把异步获取的数据传给子组件的问题

    由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...

随机推荐

  1. 《Android应用性能优化》1——代码

    1.Java代码优化 1.1 代码执行 通常情况下,不必看应用的字节码.在平台是Android2.2(Froyo)和更高版本的情况下尤其如此,因在Android2.2中引入了实时(JIT)的编译器.D ...

  2. Adobe CC Family 2015 Master 或 Adobe CC Family 2017 Master的安装步骤(图文详解)

    不多说,直接上干货!   你还在为安装PS烦恼吗?你还在为制作视频软件寻找烦恼吗?..... 前言 现在,已经出来了 简单了解, Adobe Acrobat的百度百科: http://baike.ba ...

  3. ugui使用自带功能实现反向遮罩

    不需要编写额外的shader和任何代码,只使用自带的功能 新建一个材质球,取名为mask,选择自带的UI/Default,调节参数如下图 再新建一个材质球,取名为masked,调节参数如下图 如下图所 ...

  4. Java中的四种引用

    引用定义 实际上,Java中存在四种引用,它们由强到弱依次是:强引用.软引用.弱引用.虚引用.下面我们简单介绍下这四种引用: 强引用(Strong Reference):通常我们通过new来创建一个新 ...

  5. 开启Apache Server Status

    开启Apache Server Status 发布时间:August 1, 2008 分类:Apache <DdZend工具提供下载> <PHP中MD5函数效率> Apache ...

  6. java面试⑦高级部分

    2.6.2说一下Linux下面的一些常用命令 常用: pwd 获取当前路径 cd 跳转到目录 su -u 切换到管理员 ls 列举目录 文件操作命令: 文件 tail 查看 rm -rf 删除 vim ...

  7. eclipse 中文件引用报错不能编译,但引用文件确实存在

    方法1:clean工程 方法2: 检查.classpath文件中该引用文件是否被排除在外.

  8. CodeBlocks "no such file or directory" 错误解决方案(创建类找不到头文件)

    在CodeBlocks下,有时候需要自己定义类,当然就要添加相应的头文件,但添加进去的头文件明明包含在项目中了, 但编译时还是会报错:no such file or directory;这是为什么呢? ...

  9. LinqProvider系列(三)如何实现自己的Linq Provider?

    这篇文章将在前人的肩上,继续完成实现Linq Provider的任务. 首先,我们列出linq语法的解析过程: linq本质上就是把我们惯用的语法糖,变成了一颗表达式树,然后由不同的linq Prov ...

  10. SpringMVC 面试题

    SpringMVC 面试题 什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于MVC架构的用来简化web应用程序开发的应用开发框架,它是Spring ...