社区编辑申请
注册/登录
Vue的两种常见通信方式,你了解吗?
网络 通信技术
vue组件化开发是一个非常美妙的过程,因为减少了代码之间的耦合度,提高了复用性,直接就是我们开发人员的福音。

vue组件化开发是一个非常美妙的过程,因为减少了代码之间的耦合度,提高了复用性,直接就是我们开发人员的福音。

但是组件归组件,组件之间也有几种不同的关系,不同的关系要有对应的通信方法才是道理,比如组件之间关系图就像是下面的一样,组件还不止这些,那这些复杂的组件通信应该怎么处理呢?

接下来我将介绍一下vue常见的两种种组件通信方式。

父子通信「props / $emit」

父传子

我想从父组件传一个数据给子组件,也就是上图的从app组件传到A组件,我可以先在App.vue组件定义一个数组,然后通过v-bind的方式绑定到子组件。

<template>
<div id="app">
<Child :ancient='ancient'/>
</div>
</template>

<script>
import Child from './views/Child.vue'
export default {
data () {
return {
ancient: ['床前明月光', '疑似地上霜', '举头望明月', '低头思故乡']
}
},
methods: {

},
components: {
Child
}
}
</script>

然后再在子组件通过props接收,然后循环渲染上去就好啦!

<template>
<div>
<ul>
<h2>静夜思</h2>
<h4>李白</h4>
<li v-for="item in ancient" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
ancient: {
type: Array,
required: true
}
},
data () {
return {
demoList: [111, 222, 333]
}
}
}
</script>

浏览器效果:

子传父

想在子组件传参数给父组件,首先我们在子组件创建一个点击事件,然后我们通过点击触发$emit事件将想要传递的值发送过去。

<template>
<div>
<input type="text" v-model="myText">
<button @click="handleClick">提交</button>
</div>
</template>
<script>
export default {
data () {
return {
myText: '请写出你的计划'
}
},
methods: {
handleClick () {
console.log(this.myText)
this.$emit('setMessage', this.myText)
this.myText = ''
}
}
}
</script>

然后我们在父组件通过on监听子组件的事件并接收传递过来的值然后再触发这边的事件,从而达到子传父的目的。

<template>
<div id="app">
<Child v-on:setMessage="getMessage"/>
<ul>
<li v-for="item in demoList" :key="item">{{item}}</li>
</ul>
</div>
</template>

<script>
import Child from './views/Child.vue'
export default {
data () {
return {
demoList: ['计划1', '计划2', '计划3']
}
},
methods: {
getMessage (text) {
this.demoList.push(text)
}
},
components: {
Child
}
}
</script>

浏览器如下表示:

兄弟通信

兄弟通信比较推荐用bus通信,因为可以直接两个组件之间互相通信从而省去了子传父再传子两个步骤。

首先先声明一辆bus,也就是在一个合适的地方创建一个EvenBus.js,然后内部如下:

import Vue from 'vue'
const eventBus = new Vue()

export default eventBus

然后有人可能会疑惑为什么要这样引入vue实例。先带着这个疑问继续看下去。

然后我将两个组件放在App组件内,分别是BroderB.vue和BroderD.vue。

APP.vue

<template>
<div id="app">
<BorderB />
<BorderD />
</div>
</template>

<script>
import BorderB from './views/BroderB.vue'
import BorderD from './views/BroderD.vue'
export default {
data () {
return {

}
},
methods: {

},
components: {
BorderB,
BorderD
}
}
</script>

然后我们先看BroderB.vue

<template>
<div>
<input type="text" v-model="myText">
<button @click="handleClick">提交</button>
</div>
</template>
<script>
import evenBus from '../util/EvenBus'
export default {
data () {
return {
myText: ''
}
},
methods: {
handleClick () {
evenBus.$emit('setMessage', this.myText)
}
}
}
</script>

我这里引入了EvenBus,然后通过点击事件触发事件,然后这里回应为什么要实例,因为每个实例都有emit 方法,当然也有监听 $on 方法。然后传递这个事件和值出去。

然后再在BroderD.vue接收

<template>
<div>
<h1 v-for="item in demoList" :key="item">{{item}}</h1>
</div>
</template>
<script>
import evenBus from '../util/EvenBus'
export default {
data () {
return {
demoList: ['111', '222', '333']
}
},
methods: {
handleGet (msg) {
this.demoList.push(msg)
}
},
mounted () {
evenBus.$on('setMessage', this.handleGet)
},
beforeDestroy () {
evenBus.$off('setMessage', this.handleGet)
}
}
</script>

在这个组件的mounted钩子函数中监听这个$on事件,并触发这里的方法,从而让两个组件产生通信,然后就是这里的方法接收值并使用值了

然后也有人会问,为什么后面还有一个beforeDestroy的钩子函数,那肯定是有作作用的,当我们结束这个组件的时候最好就是让这个evenBus解绑,因为如果在项目中的话,可能会存在某些奇奇怪怪的问题。

然后我们看浏览器如下

责任编辑:武晓燕 来源: 零零后程序员小三
相关推荐

2022-05-18 23:42:08

网络安全安全分析工具

2022-05-09 11:19:12

CSS函数开源

2022-05-16 10:36:08

GitHub开源项目

2022-05-17 08:39:05

VueViteTypeScript

2022-05-16 13:37:12

Sysrv僵尸网络微软

2022-05-17 15:51:32

数据中心运维能力基础设施

2022-05-16 10:49:28

网络协议数据

2022-04-18 08:09:44

渲染器DOM挂载Vue.js

2022-04-04 16:53:56

2022-04-19 14:41:29

Oracle数据库SQL

2022-05-17 16:56:33

开发工具前端

2022-05-11 08:23:54

自动化测试软件测试

2022-05-24 08:21:16

数据安全API

2022-04-01 10:41:09

Vue.js开发工具

2022-03-07 11:15:25

Pinia状态库vue3

2022-05-20 14:08:13

Web3元宇宙区块链

2022-05-24 12:42:24

物联网

2022-03-10 11:04:04

Vue3Canvas前端

2022-05-11 14:05:11

区块链网络安全存储

2022-05-07 15:31:19

物联网5G智慧城市

同话题下的热门内容

超极速优化:网络开发中的请求合并!我们一起聊聊到底什么是通信?面向2030年的6G,将带来什么改变?

编辑推荐

FTP与SFTP两者有什么区别你的手机支持5Gwifi吗?5G上网真的很快吗?VXLAN与EVPN的结合使用VXLAN技术介绍:三层的网络来搭建虚拟的二层网络什么是通信原理?原来这么简单
我收藏的内容
点赞
收藏

51CTO技术栈公众号