vue组件间通信六种方式（总结篇）

前言

组件是 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父组件
<template>
 <div id="app">
 <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
 </div>
</template>
<script>
import Users from "./components/Users"
export default {
 name: 'App',
 data(){
 return{
 users:["Henry","Bucky","Emily"] }
 },
 components:{
 "users":Users
 }
}
//users子组件
<template>
 <div class="hello">
 <ul>
 <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
 </ul>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 props:{
 users:{ //这个就是父组件中子标签自定义名字
 type:Array,
 required:true
 }
 }
}
</script>

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

2.子组件向父组件传值（通过事件形式）

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