自定义全局事件总线
事件监听和组件传值方式
在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发：
//在父组件中
mounted () {
	//给Header组件添加addTodo事件，通过$on监听
	 this.$on('addTodo', this.addTodo)
}
methods: {
      addTodo (todo) {
        this.todos.unshift(todo)
      },
}

//Header组件中
methods: {
      add () {
      	...
      	//分发事件，并且传入数据
      	this.$emit('addTodo', todo)
      	...
      }
}
//在子组件中调用add方法就会触发事件分发，那么父组件就会监听到，就能够执行addTodo方法

以上就是我们熟悉的用法。这里我们可以讨论两个问题：

通过 on 和eimt能否实现兄弟组件之间的传值？
如何自己实现事件监听、分发和移除呢？

首先、on 和 emit不能直接实现兄弟组件之间传值。

一般兄弟组件之间传值有多种方式，我使用过的方式有三种：

1.通过子组件传递给父组件，然后通过父组件传递给另外一个组件

这种你很简单应该都会吧

2.通过eventBus的方式

单独建立一个eventBus.js文件，内如如下：
	import Vue from 'vue'
	export default new Vue

假如父组件如下：
<template>
     <cpn-a></cpn-a>
     <cpn-b></cpn-b>
</template>

子组件cpn-a
<template>
     <div class="cpn-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventBus from './event.js'
export default {
   name: 'cpn-a',
   data () {
        return {
           'btext':"我是a组件内容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn:function(){
            eventBus .$on("myFun",(message)=>{  
            //注意这里应该使用箭头函数 否侧this指向有问题
                 this.btext = message      
            })
       }
    }
}
</script>

子组件cpn-b
<template>
      <div class="cpn-b">
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventBus from './event.js'
export default {
      name: 'cpn-b',
      data () {
        return {
                ‘msg':"我是组件b"
        }
      },
      methods:{
           abtn:function(){
                   eventBus.$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
           }
      }
}
</script>

3.使用PubSub.js库

这种方式和第二种差不多，只不过使用的是第三方的库，就不写代码演示了，大家可以去找官方网站案例。
探讨如何自定义全局事件总线
上面第二种方式为什么能够实现兄弟组件之间的传值呢？

首先，我们需要知道一个vue组件是谁的实例对象。是Vue的实例对象吗？

我们在一个组件中将this打印输出看一下：



通过输出信息我们可以看出来，vue组件并非是Vue的实例对象，而是VueComponent实例对象，另外，我们还发现了一件有趣的事情：



VueComponent实例对象的隐士原型对象指向了Vue实例对象。而我们知道Vue实例对象的隐式原型对象上有on和emit方法。那么这两个方法就可以实现事件的监听和分发。

画个图来理一下父子组件之间的关系：



因为每个组件都会创建属于自己的VueComponent实例对象，所以兄弟组件之间是不能通过on emit方法进行事件监听和分发的，父子组件可以使用的原因是，父组件中包含了子组件，可以通过名称遍历到子组件实例，然后找到对应的事件方法，而兄弟组件之间是没有包含关系的所有不能直接使用on 和emit方法。
那么，有什么办法可以让on和emit方法在全局实现事件监听和分发呢？
通过上面的第二种方式，即通过eventBus的方式来实现兄弟组件之间传值。这个文件返回了一个Vue构造函数的实例对象，而Vue构造函数的实例对象是可以用使用到Vue原型上的方法的，也就是可以使用到on和emit方法，从而巧妙的将这些方法的实例统一成一个，也就是说你在每个组件中使用的on和emit方法都是这一个实例对象下面的，保证了完整性，从而可以实现兄弟组件之间的传值。
我感觉这个方式要多创建一个文件，其实比较麻烦，能不能也使用this这种方式直接使用呢？

有的，我们可以直接在main.js中给Vue的原型上挂载一个公共方法
new Vue({
  beforeCreate () {
  //我们可以给Vue的原型上添加一个属性$globalEventBus
  //让这个属性等于Vue的实例对象
    Vue.prototype.$globalEventBus = this
  },

  components: {
    App
  },
  template: '<App/>'
}).$mount('#app')

使用方式：

在子组件中就可以使用
methods:{
	this.$globalEventBus.emit('addTodo',todos)
}

那么，其实这些方式的实现都跟原型链有关，只要原型链掌握的好，理解起来很轻松。

各位好哥哥好姐姐，点个赞吧

我们知道父子组件中，子组件一般是通过$emit(自定义事件名称，数据)的形式来将数据传给父组件

父组件通过回调函数处理子组件传过来的数据，

例如：

子组件内：

this.$emit(change,data)

父组件内

<json-editor @change="onSettingChange" ></json-editor>

我们都知道子组件会将数据自动作为参数传给父组件的回调函数：例如父组件我们会这样写

<json-editor @change="onSettingChange()"></json-editor>

在父组件的方法内写：

onSettingChange：function （data）{

//处理子组件传来的数据

 }

可是如果我们想在回调函数传其他的参数值怎么传呢？

有一个方法就是：

<json-editor @change="onSettingChange(arg，arguments)"></json-editor>

这样子组件传来的参数值可以通过arguments这个数组读取，多余的参数则按照一般的方式传值即可：

onSettingChange：function （arg，data）{

里面的arg是一般的传值，

data[0]里面是子组件传过来的数据

 }

Vue的自定义事件
子组件中，选择click或其他原生事件来封装
父组件中，使用v-on/@绑定事件监听器

自定义事件是自定义组件才有的。

自定义事件其实就是封装DOM原生事件，如何封装？——就是在原生事件的回调中发射（emit）一个自定义事件。

下面就是具体操作：
子组件中，选择click或其他原生事件来封装
// 自定义组件boringButton.vue
<template>
    <button v-on:click="incrementHandler">{{ counter }}</button>
</template>
<script>
    export default {
        name: 'boring-button',
        methods: {
            incrementHandler: function () {
                this.counter += 1;
               this.$emit('increment');
            }
        }
    }
</script>

父组件中，使用v-on/@绑定事件监听器
// 引用boringButton.vue的文件
<template>
    <!-- 注意increment的大小写和emit的保持一致，要一毛一样才行 -->
    <boringButton @increment='incrementTotal'></boringButton>
</template>

<script>
    methods: {
        incrementTotal: function () {
            console.log('I increment the boringButton!');
        }
   }
</script>

Vue——自定义事件
​	由于Vue中的其他组件无法使用到Vue实例中的数据，可以通过自定义事件完成对Vue实例中数据的一些操作，具体图解如下：

其中，由于Vue中具有的数据双向绑定的特性，使得前端可以作为组件与实例的桥梁，利用自定义事件实现一些功能。
示例代码：
//前端
<div id="app" >
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :item="item"
       :index="index" :key="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

//Vue
<!--导入Vue-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script type="text/javascript">

    //slot:插槽
    Vue.component("todo",{
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                    </div>'
    });
    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        //记得button绑定事件
        template:'<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove:function(index){
                this.$emit('remove',index);
    }
        }
    });
    var vm = new Vue({
        el:'#app',
        data: {
            title: "书籍列表",
            items:['Java','Math','English']
                },
        //methods不要放进data里！！
        methods: {
            removeItems:function (index){
                console.log("删除了"+this.items[index]);
                this.items.splice(index,1);
            }
        }
    });
</script>


关于V-bind key="":
}
    }
});



**关于V-bind key="":**

>一句话，**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。