VUE之组件（父子与非父子通信）

组件组织

日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。

父子组件通信

假设第二层组件想和第一层组件进行通信，分析其传值过程
1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信
2、(第二层向第一层传值)：子组件通过触发自定义事件$emit向父组件传值，如此便实现了父子组件向上通信

跨级组件通信

假设第三层组件想和第一层组件进行通信
1、(第一层组件向第三层组件传值)---禁止第一层直接传值到第三层，需要逐层传递，即1→2→3，此时便
可以实现跨级组件向下通信
2、(第三层组件向第一层组件传值)---通过触发自定义事件将数据传递至第二层，然后第二层通过事件触
发传递至第一层，如此逐层传递，便可以实现跨级组件向上通信

兄弟组件通信

假设第三层组件想和同层的另一个组件进行通信。
如果还是逐层传递至第二层，再由第二层传递至第三层，此时代码量十分累赘复杂，这也不符合Vue的定义（Vue是一个
轻量级的视图层框架）

兄弟|非父子组件通信

通过使用事件中心，允许组件自由交流，这个集中式的事件中间件就是 Bus总线。

首先定义两个兄弟组件，如下所示

创建步骤

第一步(注册全局bus总线)：创建一个Vue实例，将其赋值给Vue.prototype.bus

第二步：通过中央事件线程$bus，分发事件属性$emit

第三步：结合生命周期钩子监听和接收分发的事件，监听事件属性$on。

结合生命周期钩子监听和接收分发的事件，监听事件属性$on。
接下来修改数据

第四步：取消|清除监听事件，取消监听属性$off
日常开发里，为了避免不要的BUG，建议在使用bus时，加上清除监听操作，代码如下

如果需要监听多个组件，只需要更改 bus 的 eventName

跨级组件通信

使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递

祖父级：用于动态数据的绑定与事件的定义
父级：通过设置v-bind="$attrs"和v-on="$listeners"来充当中间人
孙子级：通过$attrs和$listeners来获取数据和事件

跨级组件通信自下而上

$emit逐层上传

通过$listeners接收事件

VUE之组件（插槽slot与可复用组件）

插槽slot

首先创建个基础组件，然后在页面调用显示，如下所示

父组件传递写法

父组件通过属性形式向子组件传值，即父传子借助props属性向下传值

缺点

上述代码虽然可以解决问题，但缺点也很明显

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性；插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

插槽

插槽分类有很多种，本节将一一介绍
（1）单个插槽/默认插槽
（2）具名插槽
（3）作用域插槽
（4）解构插槽
出现缘由：
最初在 标签中的任何内容都被视为备用内容。
备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

单个插槽(备胎插槽)

宿主元素不为空时，显示宿主元素里内容，不显示备用内容

宿主元素为空时，显示备用内容

具名插槽slot

在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer。即通过给slot添加name属性，
来指定当前slot的名字

第二步，多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素

作用域插槽slot

作用域插槽为Vue2.1.0版本新增，是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲
染好的元素。
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据。前提是需要在子组件中使用 :data=data 先传递 d
ata 的数据。

传递数据：在子组件中使用 :data=data 先传递 data 的数据

获取数据：在父组件中使用 slot-scope 特性从子组件获取数据

注意

（1）在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板(在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 )。
（2）slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象
（3）在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样，接下来父组件中使用 slot-scope 特性从子组件获取数据

解构插槽slot

v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JS表达式。所以在支持的环境下 (单文件组件或现代浏览器)，
你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：