vue再次入手(数据传递①)
准备
之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架。
1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http://www.cnblogs.com/zhengyeye/p/6245053.htmlhttp://www.cnblogs.com/zhengyeye/p/6245053.html;
2.新建好项目之后,其实为了方便起见,我们也可以设置一下基于webstrom下的vue项目的快速运行方式,可以参考老大写的:http://www.cnblogs.com/vipstone/p/6772813.html;
3.在http://localhost:8080端口可以运行该项目后,我们便继续往下研究。
再次入手研究,参考:http://www.cnblogs.com/wisewrong/p/6266038.html
过程
分为3部分:①父组件向子组件传递数据;②子组件向父组件传递数据;③互通
1.父组件向子组件传递数据,官网描述:
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。
子组件要显式地用
props
选项声明它期待获得的数据:
2.在原有项目上再添加新的子组件,目录路径如下:
3.其中header.vue中主要代码(css样式可以自己写哦~):
App.vue:
3.再次运行后,就出现了我们想要的效果(此时是父组件向子组件传递数据的例子)。
4.子组件向父组件传递数据,官网描述:
我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
使用
v-on
绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface),即:
- 使用
$on(eventName)
监听事件- 使用
$emit(eventName)
触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是
$on
和$emit
不是addEventListener
和dispatchEvent
的别名。另外,父组件可以在使用子组件的地方直接用
v-on
来监听子组件触发的事件。不能用$on
侦听子组件抛出的事件,而必须在模板里直接用v-on
绑定,就像以下的例子:
子组件login.vue中:
关于$emit:
&&:vm.$emit( event, […args] ) 参数:触发当前实例上的事件。附加参数都会传给监听器回调。
{string} event
[...args]
父组件App.vue中:
实现效果:
未完待续……
转载于:https://www.cnblogs.com/zhengyeye/p/7008922.html
vue再次入手(数据传递①)相关推荐
- vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结 方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
- html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
- vue中选中行数据传递到下个页面
vue:当前行数据传递到跳转后页面 使用 具体方法 this.$router.push('/path') this.$router.push{path:'/path',query:{aa:this.r ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
- vue父子之间数据传递
父组件: 1,引入子组件 2,ref 3,需要更新数据操作的地方 子组件: 1,定义同名事件,拿到数据执行相关操作
- 七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- Vue中从v-model,model,.sync到双向数据传递,再到双向数据绑定
前面的话 虽然v-model和.sync之间的区别,是非常明显的,但是通过这个去研究下去,就有点意思了.首先说明v-model是.sync的一种特殊情况,也就是当prop是value,vm.$emit ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- WEB前端 vue学习二 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
最新文章
- 【Android FFMPEG 开发】OpenSLES 播放音频 ( 创建引擎 | 输出混音设置 | 配置输入输出 | 创建播放器 | 获取播放/队列接口 | 回调函数 | 开始播放 | 激活回调 )
- 技术系统进化法则是_()是技术系统所有进化法则的基础。
- Stack Overflow 2016 最新架构探秘
- 基础算法 —— 调度问题
- javascript实现页面中回到顶部功能
- XML约束——Schema约束
- jquery包裹节点
- 【Linux】tar命令各参数详解
- ESXi6.0.0 新建win7虚拟机打开电源后鼠标失灵
- 做职场里的“超级英雄”,需要怎样的盔甲与工具?
- 流利阅读 2019.1.30 China’s Baidu pledges to improve search service after complaint
- 【机器学习】Python秘密武器之Numpy
- onsemi安森美FDMS86252L 50V 12A 56mΩ N沟道屏蔽门极MOSFET管
- 输入法规则(U模式输入)
- python snownlp情感分析_SnowNLP情感分析+生成词云
- 002__Hive的tez引擎的配置步骤
- windows重装系统简易版--不需要u盘
- 模仿淘宝web扫码登录
- U盘做启动盘后 容量变小怎么恢复?
- 2021年通辽市高考成绩查询,2021年通辽高考状元名单公布 今年通辽高考状元是谁资料和分数...
热门文章
- mvc5 @html,如何在MVC 5中使用 HTML5 Viewer
- 春晓html代码,春晓
- java wait 释放_Java:wait()从同步块释放锁
- OpenGL(二)——OpenGL图形绘制
- 深度优先搜索算法的通用解法
- Intel处理器CPUID指令学习
- 【Elasticsearch】 Elasticsearch并发冲突问题
- 【Java】JDK8新特性之函数式接口
- Spring:@Transactional 注解使用讲解
- spark学习-Spark算子Transformations和Action使用大全(Transformations章(二))