Vue（11）

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

父子关系，兄弟关系，隔代关系（可能隔多代）。

这里我们将父子关系的传值

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

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

1. 父组件向子组件传值

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

App.vue父组件

 <users v-bind:users="users"></users> 
 //前者自定义名称便于子组件调用，后者要传递数据名

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

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

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

 // 子组件

 <template>

   <header>

     <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件

   </header>

 </template>

 <script>

 export default {

   name: 'app-header',

   data() {

     return {

       title:"Vue.js Demo"

     }

   },

   methods:{

     changeTitle() {

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

     }

   }

 }

 </script>

// 父组件

 <template>

   <div id="app">

   //与子组件titleChanged自定义事件保持一致

     <app-header v-on:titleChanged="updateTitle" ></app-header>

  // updateTitle($event)接受传递过来的文字

     <h2>{{title}}</h2>

   </div>

 </template>

 <script>

 import Header from "./components/Header"

 export default {

   name: 'App',

   data(){

     return{

       title:"传递的是一个值"

     }

   },

   methods:{

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

       this.title = e;

     }

   },

   components:{

    "app-header":Header,

   }

 }

 </script>

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

方法二、$ emit/$on
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

具体实现方式：
var Event=new Vue();

Event.$emit(事件名,数据);

Event.$on(事件名,data => {});

$on 监听了自定义事件 data-a 和 data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听