vue组件之间的传值
vue中组件之间的传值有好几种情况
1、父向子传值
父组件向子组件传值使用props,直接上实例
city.vue是父组件,list.vue是子组件
city.vue里定义cities和hotCities。这两个数据是放在图二位置。而:cities :hot是通过子组件props来接收的。
city.vue
data里定义cities ,letter,hotCities
对应的子组件list.vue中 使用props 接收cities, hot,还有letter
2、子组件向父组件传值
使用emit event
alphabet.vue是子组件
子组件通过this.$emit('change',this.letters[index]);将change事件触发出去,同时将,this.letters[index]参数传出去
city.vue是父组件
使用@change="handleLetterChange"
handleLetterChange(letter),这个letter就是子组件this.letters[index]参数,再将letter赋值给当前页面的数据 this.letter.所以说子向父传值通过$emit发送事件以及参数
handleLetterChange (letter){
this.letter = letter
console.log(letter);
}
3、非父子组件之间的传值
1、使用bus,我的博客里有说,暂不讲
2、兄弟组件之间的传值,可以通过公共的父组件进行传值。
拿刚刚的一个例子来说 子组件是list.vue和alphabet.vue,父组件是city.vue
alphabet.vue是子组件先向父组件city.vue传值,然后将letter,赋值给this.letter,这个时候city.vue可以使用这个letter,将值传给list.vue
list.vue中
将letter引进来以后,使用watch进行监听,一旦letter有变化的时候,执行letter()
可以参考其他文档
https://www.cnblogs.com/daiwenru/p/6694530.html
https://blog.csdn.net/a15088712506/article/details/78967937
vue组件之间的传值的更多相关文章
- vue 组件之间互相传值:兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue 组件之间的传值
父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...
随机推荐
- redhat 7.6下如何更新YUM源(仓库)?
1. 安装epel-release yum install epel-release 2. 安装webstatic-release rpm -Uvh https://mirror.we ...
- kotlin中匿名对象
open class MyClass { private fun too()=object { var x : String ="x" } fun publictoo()=obje ...
- centos出现磁盘坏道,怎么检索和修复
故障现象,在/var/log/message这个目录中出现下面的error: [ [ [ [ [ [ [ [ [ [ dmesg的输出结果也是上面的error. 1.检测下坏道,将结果保存在bb.lo ...
- 关于CAShapeLayer的一些基本操作
设置圆形进度条: 实现效果如下: 实现代码如下:(注释很详细啦!!!) UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(, , ...
- SAP HANA2可视化客户端工具
TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL,MSSQL, Hive,DB2, ...
- 微信小程序的场景值scene
根据微信小程序返回给我们的场景值,我们可以根据不同的场景做出不同的处理,更加方便我们对使用场景的划分 当前支持的场景值有: :发现栏小程序主入口,“最近使用”列表(基础库2..4版本起将包含“我的小程 ...
- xshell和Xftp连接虚拟机(转载)
首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...
- OPC 数据交互环境配置
本文源自ioufev先生的博客<OPC和DCOM配置>(https://www.cnblogs.com/ioufev/p/9365919.html)及「geekc」先生的<OPC工作 ...
- 转发表(MAC表)、ARP表、路由表总结
原文:https://cloud.tencent.com/developer/article/1173761 转发表(MAC表).ARP表.路由表总结 我是东东东 发表于我是东东强订阅 1.5K ...
- WCF服务的Web HTTP方式
NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.现将WCF服务设置步骤记录如下: endpoint通讯协议设置成 webHttpBinding en ...