组件的使用（下）

二、组件之间的通信

1.钩子的运用，方便我们自己定义逻辑及何时调用：

1-独立组件的通信

（1）独立组件之间要实现通信，简单来说就是我们想让某组件A发生某事件时，另一个组件能监听到并实现回调，在上一篇中讲到父子组件的解耦时也用到过，不同之处在于这里要新建一个空白的vue实例，以此作为监听的“桥梁”，需要这样做的原因在于父子组件是包含关系，子组件监听到事件的触发后调动父组件的方法是可行的，但如果是两者互不干扰的组件就无法取得对方的方法而且可能会扰乱各自的数据。

（2）&（4）组件A被点击后调用自身的方法fn，让空白实例vm去触发事件init，组件B中的created钩子函数监听到init事件的触发立即改动data，在这里使用箭头函数是为了方便使用this，因为箭头函数中的this是绑定在vue实例上的。

（3）钩子函数：钩子是指将某个方法“挂”在合适的挂载点上，结合生命周期来看，当到达钩子的挂载点时，钩子函数将被触发。结合官网上的生命周期图来看可以分为这几个有序步骤：

1>beforeCreate：在new Vue()之后，也就是在创建vue实例之前，这时候的控制台上el、data都是undefined，在这里可以写个loading函数；

2>created：在vue获取数据并初始化函数后，这时候的控制台上数据等已完成了初始化，但是el还是undefined，这之后判断vue实例是否有绑定的根元素、是否包含模板元素，结束load后，可以做一些初始化，让函数自执行；

3>beforeMount：在vue实例进行挂载前，采用了虚拟DOM，直到挂载的时候才会把值渲染进去；

4>mounted：挂载完毕，vue开始监听这部分数据的变化，这里可以发起后端请求获取数据；

5>beforeUpdate：在检测到数据有更新之前，HTML内有用到该数据的部分会率先更新；

6>updated：数据更新完成后；

2.组件的作用域：

2-组件作用域

（1）父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译，父组件模板不知道子组件的状态，所以这里会报错，如果改成父组件模板内的outerIsShow，那么就可以正常运行。

3.使用slot插槽，这是方便混合父组件自己的内容和子组件模板，slot放置的就是原始内容。