目录
父组件向子组件传递数据
子组件向父组件传递数据
第二种通信方式: eventBus
第三种通信方式: 利用localStorage或者sessionStorage
第四种通信方式: 利用Vuex
首页 web前端 js教程 4种Vue组件通信方式实例分享

4种Vue组件通信方式实例分享

Feb 07, 2018 pm 02:23 PM
实例 方式 沟通

本文主要和大家分享4种Vue组件通信方式:父子组件的通信、非父子组件的eventBus通信、利用本地缓存实现组件通信、Vuex通信。希望能帮助到大家。

第一种通信方式:父子组件通信

父组件向子组件传递数据

  • 父组件一共需要做4件事

    • 1.import son from './son.js' 引入子组件 son

    • 2.在components : {"son"} 里注册所有子组件名称

    • 3.在父组件的template应用子组件,

    • 4.如果需要传递数据给子组件,就在template模板里写

           

1

2

 // 1.引入子组件 

     import counter from './counter'     import son from './son'

登录后复制
           

1

2

3

4

// 2.在ccmponents里注册子组件    components : {

        counter,

        son

    },

登录后复制
           

1

// 3.在template里使用子组件   <son></son>

登录后复制
           

1

2

3

 // 4.如果需要传递数据,也是在templete里写

  

   <counter :num="number"></counter>

登录后复制
  • 子组件只需要做1件事

    • 1.用props接受数据,就可以直接使用数据

    • 2.子组件接受到的数据,不能去修改。如果你的确需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量

           

1

2

   // 1.用Props接受数据      props: [               'num'

           ],

登录后复制
           

1

2

3

4

5

6

// 2.如果需要修改得到的数据,可以这样写

   props: [            'num'

        ],  data () {        return {

            number : this.num

        }

    },

登录后复制

子组件向父组件传递数据

  • 父组件一共需要做2件事情

    • 在template里定义事件

    • 在methods里写函数,监听子组件的事件触发

           

1

2

3

4

// 1. 在templete里应用子组件时,定义事件changeNumber

      <counter :num="number"                 @changeNumber="changeNumber"

      >

      </counter>

登录后复制
           

1

2

3

4

5

// 2. 用changeNumber监听事件是否触发

        methods: {

            changeNumber(e){                console.log('子组件emit了',e);                this.number = e

            },

        }

登录后复制
  • 子组件一共需要1件事情

    • 在数据变化后,用$emit触发即可

           

1

2

3

4

5

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数

        methods: {

            increment(){                    this.number++                    this.$emit('changeNumber', this.number)

                },

        }

登录后复制

第二种通信方式: eventBus

eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。

但是因为是非父子组件的关系,他们需要有一个中间组件来连接。

我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下

使用eventBus传递数据,我们一共需要做3件事情

  • 1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)

  • 2.在组件1里,this.$root.Bus.$emit触发事件

  • 3.在组件2里,this.$root.Bus.$on监听事件

           

1

2

3

4

5

6

7

8

// 1.在main.js里给app组件,添加bus属性import Vue from 'vue'new Vue({

  el: '#app',

  components: { App },  template: '<App/>',

  data(){    return {

      Bus : new Vue()

    }

  }

})

登录后复制
           

1

2

3

4

// 2.在组件1里,触发emitincrement(){

        this.number++

        this.$root.Bus.$emit('eventName', this.number)

    },

登录后复制
           

1

2

3

4

// 3.在组件2里,监听事件,接受数据mounted(){    this.$root.Bus.$on('eventName', value => {        this.number = value

        console.log('busEvent');

    })

},

登录后复制

第三种通信方式: 利用localStorage或者sessionStorage

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。

通过window.localStorage.getItem(key) 获取数据
通过window.localStorage.setItem(key,value) 存储数据

注意用JSON.parse() / JSON.stringify() 做数据格式转换。

第四种通信方式: 利用Vuex

Vuex比较复杂,可以单独写一篇

相关推荐:

Vue组件化开发经验分享

vue组件父与子通信详解

权限管理模块中动态加载Vue组件实例详解

以上是4种Vue组件通信方式实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1667
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1255
24
新一代光纤宽带技术 ——50G PON 新一代光纤宽带技术 ——50G PON Apr 20, 2024 pm 09:22 PM

上篇文章(链接),小枣君给大家介绍了宽带技术从ISDN、xDSL到10GPON的发展历程。今天,我们来聊聊即将到来的新一代光纤宽带技术——50GPON。█F5G和F5G-A介绍50GPON之前,先说说F5G和F5G-A。2020年2月,ETSI(欧洲电信标准化协会)推进了一套以10GPON+FTTR、Wi-Fi6、200G光传送/汇聚、OXC等技术为基础的固定通信网络技术体系,并将其命名为F5G,也就是第五代固网通信技术(The5thgenerationFixednetworks)。F5G是固网

Vue与服务器端通信的刨析:如何处理断网情况 Vue与服务器端通信的刨析:如何处理断网情况 Aug 10, 2023 am 10:55 AM

Vue与服务器端通信的探析:处理断网情况的策略引言:在现代Web开发中,Vue.js已成为一种广泛使用的前端框架。然而,由于网络环境的不稳定性,处理断网情况是一个需要我们考虑的重要问题。本文将分析如何在Vue中处理断网情况,并给出相应的代码示例。一、断网情况分析在网络状况较好的情况下,Vue可以通过Ajax请求或WebSocket与服务器进行通信。但是,

宽带上网技术简史 宽带上网技术简史 Apr 16, 2024 am 09:00 AM

在如今这个数字时代,宽带已经成为我们每个人、每个家庭的生活必需品。如果没有它,我们会坐立难安、心绪不宁。那么,你知道宽带背后的技术原理吗?从最早期的56k“猫”拨号,到现在的千兆城市、千兆家庭,我们的宽带技术到底经历了怎样的变革?今天这篇文章,我们就来详细了解一下——“宽带的故事”。█xDSL和ISDN下面这个界面,你见过吗?我相信很多70后80后的小伙伴,肯定见过,并且非常熟悉。没错,这就是当年我们最初接触互联网时,进行“拨号上网”的界面。那还是20多年前,小枣君还在上大学的时候。为了上网,我

无线鼠标的发展史 无线鼠标的发展史 Jun 12, 2024 pm 08:52 PM

原文标题:《无线鼠标到底是怎么做到无线的?》无线鼠标慢慢成了现在办公电脑的标配,从此再也不用拖着长长的线跑来跑去了。可是,无线鼠标是怎么工作的呢?今天我们一起来学习一下No.1无线鼠标的发展史你知道吗,无线鼠标现在也已经40岁了,1984年的时候,罗技研制了世界上第一款无线鼠标,不过这个无线鼠标采用红外线作为信号的载体,据说长得像下面图片这个样子,后面由于性能原因而宣告失败。直到十年后的1994年,罗技终于研发成功了一个工作在27MHz的无线鼠标,这个27MHz频率也成了很长一段时间内,无线鼠标

PHP实现Socket通信的方法与技巧 PHP实现Socket通信的方法与技巧 Mar 07, 2024 pm 02:06 PM

PHP是一种常用的开发语言,可以用于开发各种Web应用程序。除了常见的HTTP请求和响应以外,PHP也支持通过Socket进行网络通信,实现更为灵活和高效的数据交互。本文将介绍PHP如何实现Socket通信的方法与技巧,并附上具体的代码示例。什么是Socket通信Socket是一种在网络中进行通信的方法,可以在不同的计算机之间传输数据。通过S

长白山主峰可正常上网:吉林移动、中兴通讯完成 2.6G + 700M 三载波聚合商用,峰值速率达 2.53Gbps 以上 长白山主峰可正常上网:吉林移动、中兴通讯完成 2.6G + 700M 三载波聚合商用,峰值速率达 2.53Gbps 以上 Jul 25, 2024 pm 01:20 PM

7月25日消息,吉林移动、中兴通讯现已在长白山主峰完成基于2.6G频段(100+60M)加700M频段(30M)三载波聚合商用,现场测试峰值速率最高可达2.53Gbps以上。官方指出,长白山是中华十大名山之一,现为国家AAAAA级旅游景区、世界地质公园、世界生物圈保护区、世界最佳自然保护地,2023年接待游客数达到274.77万人次,本次部署3CC将极大满足用户的网络需求。据介绍,吉林移动2024年初已经率先完成2.6G(100+60M)加4.9G(100M)频段三载波组网载波聚合试点,下载峰值

诺基亚计划以 1.85 亿欧元的价格出售其设备管理和服务管理平台业务 诺基亚计划以 1.85 亿欧元的价格出售其设备管理和服务管理平台业务 Dec 21, 2023 am 08:07 AM

诺基亚今日宣布,将其设备管理和服务管理平台业务以1.85亿欧元的价格出售给Lumine集团,预计明年第一季度完成根据我们的调查发现,Lumine是一家通信和媒体软件公司,最近从ConstellationSoftware分拆出来。作为交易的一部分,预计会有大约500名诺基亚员工加入Lumine据公开资料显示,这些平台的业务主要是诺基亚通过之前两次收购Motive和mFormation形成的。Lumine称其有意恢复Motive品牌,并将其作为一个独立的业务部门Lumine表示,收购价格包括一笔高达

学习Golang指针转换的最佳实践示例 学习Golang指针转换的最佳实践示例 Feb 24, 2024 pm 03:51 PM

Golang是一门功能强大且高效的编程语言,可以用于开发各种应用程序和服务。在Golang中,指针是一种非常重要的概念,它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程,本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中,每个变量都有一个地址,地址就是变量在内存中的位置。

See all articles