下图是父元素:

下图是子元素,获取父元素的值,使用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. Java后台 解析JSON的几个方法

    1.对象转JSON对象. public static void main(String[] args) { Domain demo = new Domain( "在线JSON校验格式化工具 ...

  2. ubuntu安装maven

    1.安装maven前需要安装JDK 2.下载mavenapache-maven-3.3.9-bin.tar.gz 3.解压maven到当前目录tar -zxvf apache-maven-3.3.9- ...

  3. javascript 数组去重的6种思路

    前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境.但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路 ...

  4. Hadoop基础总结

    一.Hadoop是什么? Hadoop是开源的分布式存储和分布式计算平台 二.Hadoop包含两个核心组成: 1.HDFS: 分布式文件系统,存储海量数据 a.基本概念 -块(block) HDFS的 ...

  5. Self-Attention与Transformer

    直观理解与模型整体结构 先来看一个翻译的例子“I arrived at the bank after crossing the river” 这里面的bank指的是银行还是河岸呢,这就需要我们联系上下 ...

  6. 术语CDATA,其实可以理解为一种特殊的转移字符

    参考:http://www.w3school.com.cn/xml/xml_cdata.asp 常见于XML文档,所有 XML 文档中的文本均会被解析器解析. 只有 CDATA 区段(Charact ...

  7. Prim算法和Kruskal算法求最小生成树

    Prim算法 连通分量是指图的一个子图,子图中任意两个顶点之间都是可达的.最小生成树是连通图的一个连通分量,且所有边的权值和最小. 最小生成树中,一个顶点最多与两个顶点邻接:若连通图有n个顶点,则最小 ...

  8. Oracle官网下载参考文档

    最近有人问我有没有Oracle11g数据库官方参考文档,我就想,这不是在官网可以下载到的吗,疑惑,问了之后才知道,他官网找过,但时没有找到.不要笑,其实有很多人一样是找不到的,下面就一步一步操作下: ...

  9. 面试1 SQL SERVER 查询第20行到30之间的数据

    SQL SERVER 查询第20行到30之间的数据 1.先查询前20行的ID,后查询除去20条记录的前10条记录 SELECT TOP 10 * FROM tbBank WHERE BankID NO ...

  10. 手把手教你写一个java的orm(三)

    使用反射解析class 上一篇我们完成了class到表映射关系的建立,但是这个并不能被代码正确处理,我们还需要让程序能够正确的识别这些映射关系. 这一篇主要讲的是建立一个从class到表的模型,使我们 ...