day06

1、组件关系

​ 父子 兄弟 祖孙 其它

2、通信方式 props

​ 父子之间传递 ​ 父组件给子组件传递非函数数据，就是给子组件传递数据 ​ 父组件给子组件传递函数数据，本质是想要子组件的数据

使用场合：
	父子最好
	父向非子后代传递，必须逐层去传递   麻烦
	不是父子关系的组件，必须借助相同的父组件去通信  麻烦

3、通信方式 vue自定义事件 子向父传递，只是适合这个场合

​ 理解原生dom事件： ​ 事件类型 ： 固定的有限的几个 ​ 回调函数 ： 谁调用（浏览器） 调用时候的默认参数（事件对象event） ​

vue自定义事件
	事件类型 :  无数个  
	回调函数 ： 谁调用 （自己调用）  调用时候默认的参数 （有可能有也可能没有  如果调用时候传了参数，默认参数就有
如果没有传，那就没有（undefined））		 

​ 父组件当中可以看到子组件对象（组件标签） 因此可以在父组件当中给子组件对象绑定一个自定义事件 子组件可以通过$emit去触发自己身上父组件给绑定的事件，通过调用事件回调函数传递数据给父组件

父组件当中去给子组件对象绑定事件监听  
	 @直接在组件标签对象当中去绑定，和绑定系统事件一致
	 $on，在mounted当中去绑定，但是需要获取到子组件标签对象（通过ref指定，然后获取到）
	 $once()和$on（）类似，但是只能触发一次

在子组件当中适当的位置去触发事件并传递参数
	$emit(),在子组件当中去触发，子组件对象触发
	
$off()可以在销毁之前解绑事件

​

使用场合：子向父传递数据，其余情况都不能用

4、通信方式 全局事件总线

适用场合： 任何场合


事件总线(对象)满足的两个条件：1、所有的组件对象都能找到它  2、可以调用$on和$emit

本身自定义事件可以完成子向父之间的传递，因为父组件中可以看到子组件，可以为子组件绑定事件，子组件中可以触发事件

但是如果不是子向父，那么其余的就没办法了，因为两个组件互相是看不到的，没办法再其中一个给另外一个绑定事件
此时我们可以借助中间人，也就是他们都可以同时看到的一个人，就是全局事件总线（所有的组件对象都能看到）

在接收数据的组件中，获取总线绑定事件
在发送数据的组件中，获取总线触发事件

全局事件总线说到底就是个对象，我们通常就是用vm对象作为全局事件总线使用
把vm对象添加到Vue原型对象  就形成全局事件总线（vm）

5、通信方式 消息订阅和发布（用法类似于全局事件总线，vue当中几乎不用）

​ github查阅 PubSubJS第三方插件 ​ 订阅者是接收数据的组件 ​ 发布者是发送数据的组件 ​ 坑： 订阅者的回调函数里面形参第一个必须有，而且是为了接受发布者的消息类型的，实际意义没有，但是必须写上

6、通信方式 slot插槽

​ 一个组件会多次使用，但是又有少部分结构数据会发生变化，（当然可以用不同的子组件）

那么就得通过父组件告诉子组件变化的内容是什么，此时就要用到这个插槽

子组件当中<slot></sloat>其实就是占位用的，让父组件给它填充内容，可以带标签

具名插槽
默认插槽






作用域插槽  
	子组件的slot可以通过 属性传递值给父组件，然后父组件可以根据不同需求改变这个slot内部的显示结构
	把子组件的值，传给父组件固定的区域进行操作

	父组件的数据是给子组件展示的
	子组件展示过程当中，数据的结构由父组件决定的。

7、vue-ajax使用和案例

​ github的两个测试接口：获取比较火的仓库及获取用户 ​ 接口1: api.github.com/search/repo… ​ 接口2: api.github.com/search/user…

vue-resource vue插件的使用
axios第三方库的使用



login代表用户的用户名
avatar_ur 代表用户的头像地址	
url: 代表这个用户的github地址





小案例：获取github用户
	1、静态页面实现   
		拆分页面 定义组件    3个组件  App   Search   Main   不需要Item了
		组装组件
		渲染组件

	2、动态交互和初始化显示
		2-1初始化显示Main组件的内容  Main里面要显示的是不同内容，而不是直接就是用户信息
			四个数据控制显示的内容是什么： isFirst  isLoading errMsg  users 
		2-2交互：
			点击search按钮要发送ajax请求，需要分析ajax在哪发送（当然得安装axios）
			
			点击按钮之后，需要把输入的数据发送到Main组件去发送ajax请求(全局事件总线)
			
			在Main组件中的事件回调当中发送ajax请求，发送前 成功时 失败时 都要考虑显示的内容
				也就是说需要修改数据  isFirst  isLoading errMsg  users 
			请求成功：需要过滤数据，添加给我们自己的users
			请求失败：需要把失败信息添加给我们自己的errMsg 

	3、使用vue-resource发送请求，但是现在用的不多,了解就好
		插件使用步骤：
			安装
			导入
			Vue.use(插件)

		使用方式类似axios，但是失败信息不同


	4、使用axios发送请求

​ ​ ​