组件

 

组件需要注册后使用，全局注册后任何Vue实例都可以用，也可以在Vue事例中局部注册，组件中也可以使用components选项注册组件；

组件的data选项必须是函数，然后将数据return出来；return出的对象引用了外部的对象，那这个对象就是共享的；

props:来声明需要从父级接收的数据；值可以有两种：字符串数组，对象；

使用v-bind动态绑定props的值：当父组件的数据变化时，也会传递给子组件。

Vue 2.x通过props传递数据是单项的了，即父组件数据变化时会传递给子组件；反之不行。

组件通信：

当子组件需要向父组件传递数据时，就需要用到自定义事件。v-on除了监听DOM事件外，还可以用于组件之间的自定义事件。

子组件用$emit()来触发事件，父组件用v-on来监听子组件的事件。$emit()方法的第一个参数是自定义事件的名称，第二个参数是要传递的数据，可不填或多个。

Vue2.x可以在自定义组件上使用v-model指令，组件$emit()的事件名是input，可以直接在父组件中的模板上用v-model绑定一个数据。不用再自定义事件。

非父子通信：Vue1.x中用$dispatch()和broadcast()。$dispatch()用于向上级派发时事件，只要是他的父级（一级或多级）都可以在Vue实例的events选项内接收；$broadcast()是由上级向下级广播事件，用法完全一致。

在Vue2.x中，推荐使用一个空Vue实例作为中央事件总线（bus）；创建一个空Vue实例，里面没有任何内容，全局定义了组件component-a;最后创建Vue实例app，在app初始化时，也就是生命周期（mounted）钩子函数里监听了来自bus的事件on-message,而在组件component-a中点击按钮会通过bus把事件on-message发出去，此时app就会接收到来自bus的事件，进而在回调里完成自己的业务逻辑。

在子组件中，this.$parent可以直接访问该组件的父实例或组件，父组件可以通过this.$children访问她的所有子组件。

内容摘自《Vue实战》--梁灏。