Vue中实现组件通信的方式

Vue中实现组件通信的方式

在VUE中实现通信有很多种的方式，每一种都有其对应的使用情况。

首先我们看看有哪些方式：

props emit

v-model refs

provide/inject eventBus

vuex/pinia(状态管理工具)

常见的是上面的这几种，少见的其实还可以算上插槽 slot，混入，路由携带参数，localStorage， $parent / $children等

1. props

常常使用在父组件传递給子组件通信的过程中，首先在子组件中使用 props，来接收对应的属性，而在父组件中使用子组件的地方，添加上面定义的属性。

1. emit

这个就和上面的相反，是使用在子组件给父组件传递值的中。子组件中声明对应的事件，当子组件触发事件，就会通过 this.$emit(‘事件’ , ‘数据’)传递到，而在父组件中使用子组件的地方，添加上面定义的事件，这个可以获取子组

件传来的值。

1. provide/inject

这对组合往往使用在层级比较深的时候，比如A组件下可能还有 B组件，B组件下有C组件…E组件.而使用这对 API，就能无论层级有多深都能获取到

1. eventBus

也就是事件总线，简单粗暴，可以到处飞。可以不管你是不是父子关系，通过新建一个Vue事件bus对象，然后通过 bus.emit 触发事件，bus.on 监听触发的事件。但不建议乱用，不好维护。

1. vuex

对于大型的项目来说往往是很必要的，尤其单页面应用，很多页面嵌套页面，关系很多。而使用 VUEX 就能便捷的统一管理。

总结

常见的组件通信方式有通过 props / emit / provide 和 inject / eventBus / vuex 等，一般根据不同的场景来决定使用的方式。比如父子组件通信使用 props，反过来使用 emit。而当层级很多的时候使用 provide，全局的状态管

理使用 vuex等。

Vue事件总线（EventBus）

简单来说，我们知道Vue中有多种的方式来父子组件传值

父传子：props 子传父：this.$emit(‘事件’ , ‘数据’)

//两种方式，一种是创建一个单独的文件如下面的的bus.js在用到的地方导入， //还有中就是在项目的main中实例化

// bus.js import Vue from 'vue'

export const EventBus = new Vue()

// main.js Vue.prototype.$EventBus = new Vue()

创建好之后我们就很简单啦

//在需要发送事件的地方用通过 this.$emit(‘事件’ , ‘数据’)来发送 //在需要接收的地方用xxx.$on('事件',(数据)=>{ })来接收

//下面是一个完整的例子

<!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title> </head>

<body> <div id="app">

<Parents></Parents> </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>

//创建一个媒介来连通两个是组件 const medium = newVue()

const ABorder = { template: `<div>我是儿子A

<div>我的名字叫：{{name}}</div> <button @click="newName">给自己命名</button>

</div>`, created () {

medium.$on('letDiscussionName',(val)=>{ alert(val)

})

}, //用props来接收父组件传来的值，同时父组件要绑定属性

props: {

default: '我也不知道呀' }

}, methods: {

newName() { this.$emit('newName','大黄狗')

} }

};

const BBorder = { template: `<div>我是儿子B

<button @click="discussionName">讨论</button> </div>`,

methods: { discussionName() {

medium.$emit('letDiscussionName','儿子A来讨论')

} }

}

const Parents = { data() {

return { msg: '孩儿们好呀！',

aName: '大花猫', bName: '大黄狗'

} },

methods: { chang(value) {

this.aName = value }

}, //可以有下面两种形式来调用组件

template: `<div>我是父组件:{{msg}} <hr/>

<a-border :name= 'this.aName'@newName = 'chang'></a-border> <hr/>

<BBorder></BBorder></div>`, components: {

ABorder, BBorder

} }

//实例化一个vue，并且绑定到app这个元素 const vm = new Vue({