VUE:父子组件间传参、子组件传值给父组件、父组件传值给子组件

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题

首先我们先搭好开发环境,我们首先得装好git和npm这两个工具

环境搭建步骤:

  • 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行
  • vue init webpack vue-demo 这是vue基于webpack的模板项目
  • cd vue-demo 进入vue-demo文件夹
  • npm install 安装package.json中依赖的node_modules
  • npm run dev 运行该项目

刚刚我们创建的是vue基于webpack工具的一个模板项目,对于webpack和热加载这些不熟悉的同学不必在意,我们现在不会过多关注webpack的,不过建议对vue有兴趣的同学还是去了解一下webpack,它也算是vue开发中的一个必备工具


接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样

App.png

一.父组件向子组件传值

1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性

child.png


3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

App2.png


4.保存修改的文件,查看浏览器

browser.png


5.我们依然可以对message的值进行v-bind动态绑定

App3.png


此时浏览器中

browser2.png

父组件向子组件传值成功
总结一下:

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.在子组件中创建一个按钮,给按钮绑定一个点击事件

Child2.png


2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

Child3.png


3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

App4.png


4.保存修改的文件,在浏览器中点击按钮

browser3.png

子组件向父组件传值成功
总结一下:

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。

转自:https://www.cnblogs.com/daiwenru/p/6694530.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/447999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c1科目三考试技巧

起步平稳。转向灯不要错了。靠边要和路边平行。离边近量保持:30CM距离。车子在运行中。换档尽量保持利落。若道路比较复杂。看好路牌路标,不要违规。一般很容易过的。你不要紧张。晚上夜考灯光把好。一切很顺利的。祝你好运。 方法/步骤 紧记着“一灯二…

Astyle 一键格式化项目代码

代码格式化差异问题: 一个团队有多个开发,因开发习惯不同,开发时少添加了空格、换行等。 格式化代码时,一般会将整个文档格式化,代码提交时会发现未知的修改项。 Astyle格式化工具 官网下载地址:Artistic S…

浅谈 JavaScript、ECMAScript (ES5、ES6)是什么、相互关系

一、ECMAScript 和 JavaScript 的关系 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 ES6 ECMAScript6 从百度百科的资料上来看: ECMAScript是一种由Ecma国际通过ECMA-…

CorelDRAW X7 X8 2017 2018是什么关系?

从CorelDRAW 2017版本开始我们叫习惯了的X几系列的CorelDRAW毅然决然的就换了称呼,所以有时候很多朋友对于软件版本,经常会傻傻分不清,还有人认为X8版本比2017版本高,究竟为什么会这么认为呢? “帮我转个X8吧”。 “我…

阮一峰 《ECMAScript 6 入门》:let 和 const 命令

以下内容全文出自 阮一峰的书: 《ECMAScript 6 入门》 电子版地址:ES 6标准入门(第3版) let 命令 基本用法 ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令…

离合器半联动

半联动即离合器半联动。 离合器半联动是指离合器不稳定联接的工作状态,即驾驶员踩离合器踏板,使离合器压板压力逐步减小,造成主动盘与从动盘之间处于边转边滑的状态。在场内驾驶考试时,驾驶员由于操作不熟练,不能在要求…

学习 cookie session 正向代理和反向代理的区别

1.学习网址:https://www.cnblogs.com/wxinyu/p/9154178.html 1.1 当我打开一个浏览器的时候,客户端有session id区分用户, 服务器有了session的浏览记录(浏览器编号的txt).多个页面则多个session, 1.2 token就是令牌…

axios 发 post 请求,后端接收不到参数的解决方案

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 问题场景 场景很简单,就是一个正常 axios post 请求: axios({headers: {deviceCode: A95ZEF1-47B5-AC90BF3},me…

nginx+keepalived高可用性负载均衡

一、前言nginx进程基于于MasterSlave(worker)多进程模型,自 身具有非常稳定的子进程管理功能。在Master进程分配模式下,Master进程永远不进行业务处理,只是进行任务分发,从而达到Master进程的存 活高可靠性,Slave(work…

经典监督学习方法

生成算法尝试去找这个数据到底是怎么生成的(产生的),然后再对一个信号进行分类。基于你的生成假设,哪个类别最有可能产生这个信号,这个信号就属于那个类别。 判别模型不关心数据是怎么生成的,它只关心信号之…

Ubuntu版本更新一路走来:朕就是这样的汉子

今日,Ubuntu发布了最新的14.04版本。当然,业界对新版Ubuntu褒贬不一,为此我们回顾了Ubuntu版本更新历史上几个比较有代表性的版本,看看Ubuntu这一路走来究竟有什么变化。Ubuntu刚刚发布了最新的14.04版本,围绕这一版本…

安装Ubuntu 14.04后要做的5件事情

Ubuntu最新版本Ubuntu 14.04已经发布,它是一个长期支持版本(LTS),提供软件包和安全更新的服务周期为5年。本文为大家简单介绍了Ubuntu 14.04版本新特性和安装Ubuntu 14.04后需要做的5件事情,以供参考。Ubuntu目前是世界…

昨天,我的大学学习[2]

昨天,我的大学学习[2] 曾毅 谁能改变我的命运[大学二年级] 如果说大学一年级的时候是一种被动学习状态,对计算机科学不能揽其全貌,那么进入大学二年级以后的学习便是比较有针对性的了,但这种转变并非偶然,同样也是经过…

springboot 项目输出 sql 到控制台、 SpringBoot 中 Mybatis 打印 sql

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 SpringBoot中Mybatis打印sql 如果使用的是 application.properties 文件,加入如下配置: logging.level.com.ex…

VUE.JS 组件化开发实践

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子。后来接到一个基于模板的活动…

提升开发效率的十个工具

Git 之前也有过不少版本控制的工具。有好的,也有糟糕的。不过它们都或多或少地误入歧途了。 这时候Git出现了。一旦你用上了这个神奇的工具,很难相像你还会碰到比它更好的了。 还没用过Git?试一下吧。 Stack Overflow 真的,我没…

input 框 去掉下面的提示文字、提示选项

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 我的一个输入框总是有提示文字: 2. 去掉方法,给 input 加一个属性: autocomplete"off"…

解决: VUE 项目中表单提交中文乱码、接口请求参数中文乱码

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 表单提交出现乱码: 接口请求乱码同于上图。 2. 解决: 在出现乱码的内容外面加函数:decodeURI()…

大数据 — Hadoop

HDFS Hadoop 1.0: 3个组件: NamenodeSecondNamenodeDatanodenamenode(主节点,master,只有一个,单点故障的风险)中间存储信息(元数据) 2种映射关系: path -> blockid l…

VUE:兄弟组件间传参

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1、定义一个中间 eventBus.js ,只有 2 行代码,用于传参: // 此页面是vue 巴士,用于兄…