组件通信高级

1、组件间通信props(一)
props 子组件声明接收属性三种写法 【‘todos’】 { todos:Array} { todos:{type:Array,default:[]}}

父子之间 
父可以给子传递 非函数和函数
传非函数数据 就是父给子
传函数数据  本质是父想要子的数据



特殊：
	路由配置 props（三种）  路由组件之间没有标签，但是可以把参数通过路由映射为属性
	1、布尔值  true   把路径params参数映射为要显示的组件内属性
	2、对象   {name:'赵丽颖'}   只能映射传递额外的静态的数据 一般不用
	3、函数	  props:(route) =>{}  自己手动映射params参数和query参数 成为要显示的组件内属性
	
	如果不用props，那么组件内要用数据必须要写成 this.$route.params.xxx   this.$route.query.xxx

2、全局事件总线（二）

所有场合

本质是一个对象
全局事件总线的角色标准
	1、所有的组件对象都可以看到它
	2、可以使用$on和$emit方法

	vm对象
	vm对象必须挂在Vue的原型上



怎么添加事件总线
1、安装总线  本质就是在Vue的原型上挂上vm作为总线 
2、在接收数据的组件对象当中  获取总线给总线绑定自定义事件   this.$bus.$on
3、在发送数据的组件对象当中  获取总线触发总线身上绑定的自定义事件   this.$bus.$emit

3、组件间通信自定义事件（三）

自定义事件
	子向父传递数据

*******************************************
原生dom事件    
	事件类型  回调函数   谁调用   默认传递的实参是什么 


	1、事件类型       固定的几个 

	2、回调函数       自己去定义的

	3、触发（分发、触发事件）了谁调用   系统调用浏览器去调用 

	4、event事件对象 就是浏览器调用回调函数的时候传递的默认参数

	box.onclick = function(event){
		
	}


自定义事件     
	事件类型  回调函数   谁调用   默认传递的是什么

	1、事件类型            无数个

	2、回调函数            自己去定义的

	3、谁调用              自己去调用   自己使用$emit触发调用的

	4、默认传递的是什么    默认传递的是自己给的参数 （有就有，没有就没有undefined）
	
	this.$emit('haha',10)





原生dom事件在html标签和组件标签上的区别   （Event1组件测试）
	在html标签上添加就是原生的dom事件
	在组件标签上添加就是自定义事件，想成为原生的事件得添加修饰符.native,就是把原生dom事件添加到组件根元素上	(事件委派了)

vue自定义的事件在html标签和组件标签上的区别 （Event2组件测试）
	在html标签上添加自定义事件无意义，所以自定义事件是给组件标签添加的		
	事件名可以任意，也可以和原生的dom事件名相同，但是在组件标签身上即使添加原生dome事件也是自定义的

4、v-model 深入（四）
element-ui表单相关项都使用到了v-model
官方网站也提出了怎么去使用

1、html input v-model的本质
	:value = “data”  //读取数据
	@input = "data = $event.target.value"  //写数据
	

2、组件标签上 v-model本质
	:value = "data"  父组件传递属性给子组件，子组件需要接受
	@input = "data = $event" //父组件当中给子组件添加的自定义事件
	数据在父组件当中

	
	子组件当中必须这样写
	先接受props:['value']
	
	子组件表单类元素
		：value = "value"
		@input = "$emit('input',$event.target.value)"


干了两件事  
	先显示数据  
	再绑定修改数据的事件   
	只不过在html和组件标签上绑定的@input事件不同   一个是原生的 一个是自定义的事件


实现父子组件双向数据同步问题


源码查看element-ui的input是不是使用了

本质上还是自定义事件和props组合

5、sync 属性修饰符（五）

实现父子组件双向数据同步问题
和 v-model 实现效果几乎一样
v-model一般用于带表单项的组件
sync属性修饰符一般用于不带表单项的组件

父组件给子组件属性传递数据后面添加.sync
子组件修改数据 需要分发事件@click = $emit("update:属性名",要更新的数据)

本质上还是自定义事件和props组合

6、$attrs和$linsteners（六）
本质就是父组件中给 子组件传递的所有属性组成的对象及自定义事件方法组成的对象

$attrs 如果不声明props 那么子组件当中$attrs是可以看到  如果声明了哪个属性，那么那个属性在$attrs当中看不到
它会排除 props声明接收的属性 以及class style

可以通过v-bind 一次性把父组件传递过来的属性添加给子组件
可以通过v-on   一次性把父组件传递过来的事件监听添加给子组件

对一个组件进行二次封装

7、 element-ui的button添加click事件会触发，添加dblclick就不会触发的问题

element-ui的button  子组件内部触发了这个单击事件
element-ui的button  子组件内部没有触发这个双击事件

扩展双击点击触发element-ui button事件，使用原生.native

8、$parent 和 $children以及$refs（七）
$children：所有子组件对象的数组
$parent：代表父组件对象

父组件当中可以通过$children找到所有的子组件去操作子组件的数据（当然可以找孙子组件）
子组件当中可以通过$parent找到父组件（当然可以继续找爷爷组件）操作父组件的数据

9、扩展： 多个组件有部分相同的js代码

html js  css 相同     封装组件

同一个组件js代码重复    封装函数

不同的组件js代码重复  封装混合  

实现组件之间js代码的复用  利用vue的mixin技术   参考官网

比如多个组件的methods里面很多函数都是重复的 那么我们可以定义单独的模块去把这些相同的代码定义到外部

export const xxxMixin = {

	methods:{
		重复的代码写在这
		
	}

}

10、作用域插槽（八）
适用：父子之间
数据是在父组件当中的，数据是要给子组件去展示的（vfor）
展示的过程当中，数据的结构 子组件说了不算，是由父组件决定的

父组件要把需要子组件展示的数据传递给子组件
子组件在展示的过程当中，需要改变结构的数据传回给父组件
父组件再把结果和数据一并传回给子组件

11、vuex（九）
所有场合

	看项目的大小来决定要不要使用vuex
	一般我们都要用的，一般情况我们的项目都比较大，项目比较复杂，使用vuex比较方便

	项目如果很小，使用vuex反而会降低效率，因为vuex是需要占用打包体积的

5个核心概念
state
mutations
actions
getters
modules

12、消息的订阅和发布 PubSubJS (十) 参考 github
所有场合
代码类似全局事件总线，但是在vue当中因为存在了全局事件总线，所以这个东西几乎不用
PubSubJS 要用这个包来实现消息的订阅和发布，这个包使用起来会增加体积