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组件之间的传值的更多相关文章

  1. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  2. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  3. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  4. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  5. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  6. vue组件之间互相传值:父传子,子传父

    今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...

  7. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  8. vue组件之间的传值方式

    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. vue 组件之间的传值

    父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...

随机推荐

  1. redhat 7.6下如何更新YUM源(仓库)?

    1. 安装epel-release     yum install epel-release 2. 安装webstatic-release     rpm -Uvh https://mirror.we ...

  2. kotlin中匿名对象

    open class MyClass { private fun too()=object { var x : String ="x" } fun publictoo()=obje ...

  3. centos出现磁盘坏道,怎么检索和修复

    故障现象,在/var/log/message这个目录中出现下面的error: [ [ [ [ [ [ [ [ [ [ dmesg的输出结果也是上面的error. 1.检测下坏道,将结果保存在bb.lo ...

  4. 关于CAShapeLayer的一些基本操作

    设置圆形进度条: 实现效果如下: 实现代码如下:(注释很详细啦!!!) UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(, , ...

  5. SAP HANA2可视化客户端工具

    TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL,MSSQL, Hive,DB2, ...

  6. 微信小程序的场景值scene

    根据微信小程序返回给我们的场景值,我们可以根据不同的场景做出不同的处理,更加方便我们对使用场景的划分 当前支持的场景值有: :发现栏小程序主入口,“最近使用”列表(基础库2..4版本起将包含“我的小程 ...

  7. xshell和Xftp连接虚拟机(转载)

    首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...

  8. OPC 数据交互环境配置

    本文源自ioufev先生的博客<OPC和DCOM配置>(https://www.cnblogs.com/ioufev/p/9365919.html)及「geekc」先生的<OPC工作 ...

  9. 转发表(MAC表)、ARP表、路由表总结

    原文:https://cloud.tencent.com/developer/article/1173761 转发表(MAC表).ARP表.路由表总结 我是东东东   发表于我是东东强订阅 1.5K ...

  10. WCF服务的Web HTTP方式

    NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.现将WCF服务设置步骤记录如下: endpoint通讯协议设置成  webHttpBinding en ...