vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式

摘要： 总有一款合适的通信方式。

Fundebug经授权转载，版权归原作者所有。

前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。

本文的代码请猛戳github 博客，纸上得来终觉浅，大家动手多敲敲代码！

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1. 父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件

import Users from "./components/Users"

export default {

name: 'App',

data(){

return{

users:["Henry","Bucky","Emily"]

}

},

components:{

"users":Users

}

}

//users子组件

export default {

name: 'HelloWorld',

props:{

users:{ //这个就是父组件中子标签自定义名字

type:Array,

required:true

}

}

}

总结：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2. 子组件向父组件传值(通过事件形式)

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

// 子组件

{ {title}}

//绑定一个点击事件

export default {

name: 'app-header',

data() {

return {

title:"Vue.js Demo"

}

},

methods:{

changeTitle() {

this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值”

}

}

}

// 父组件

import Header from "./components/Header"

export default {

name: 'App',

data(){

return{

title:"传递的是一个值"

}

},

methods:{

updateTitle(e){ //声明这个函数

this.title = e;

}

},

components:{

"app-header":Header,

}

}

总结：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

方法二、$emit/$on

这种方法通过一个空的 Vue 实例作为中央事件总线(事件中心)，用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可