1、props
props是vue当中最基础的也是用的最多的组件间通信方式
props适用于父子之间
父给子如果传递的是非函数数据 那就是父给子传数据
父给子如果传递的是函数数据 就是子给父传数据
props子组件接收（声明接收属性）：接收属性的方式3种
1、数组 不能限定数据
2、对象的简单写法 只能限定数据类型
3、对象的复杂写法 都能限定 validater(){}
路由配置props 简化路由参数的写法
1、布尔值 true 代表只会将路由的params参数映射为组件内属性，但是不能映射query参数 没啥用
2、对象 可以传递额外的数据 没啥用
3、函数 可以映射任何数据作为组件的属性
2、自定义事件
事件分为：原生dom事件和自定义事件两大类
事件三要素：事件源 事件类型 回调函数，事件源就是添加事件的元素/组件
1、原生dom事件
事件类型：有限个
回调函数：
回头再调的函数（当条件达到的时候，再去调用），三大特点：1、自己定义2、自己没调、3最终执行
回调函数调用是谁调的？
浏览器（系统）内核 会驱动事件源，去调用回调函数。简称是系统调的
回调函数调用的时候传递的默认参数是什么？ $event
e/event 称作叫事件对象
浏览器在这一次触发事件的时候，会把事件相关的所有信息，封装为一个对象，在调用回调的时 候，传递给回调的第一个形参，称作叫事件对象
2、自定义事件
事件类型：无数个
回调函数：
自己定义的
回调函数调用是谁调的？
自己调用的 this.$emit()
回调函数调用的时候传递的默认参数是什么？$event
自己传递 传递的是什么就是什么 不传递就是undefined
原生dom事件在html标签和组件标签身上使用的区别
1、在html标签身上原生dom事件就是原生dom事件，该怎么玩就怎么玩
2、在组件标签身上即使是原生dom事件的名字，也会变为自定义事件
vue2当中所有的事件在，组件标签身上，默认都是自定义事件
如果想让这个事件还是原生dom事件，需要用到一个新的事件描述符.native
本质，这个原生dom事件是添加给子组件的根标签，形成事件委派
自定义事件在html标签和组件标签身上使用的区别
1、如果是一个自定义事件用在html标签身上，无意义
2、如果是一个自定义事件用在组件标签身上，该怎么玩怎么玩。内部去触发
在外部是没办法触发的，this是不对的
3、全局事件总线
全局事件总线是vue当中任意组件间通信方式
全局事件总线本质是一个对象
全局事件总线需要满足两个条件才能作为总线使用
所有的组件对象都能找到它
必须能调用和emit
vue当中能符合这两个条件的： 一个是vm 一个是组件对象(vc代表VueComponent)
最终选择vm作为事件总线去使用
1、vc太多了 拿谁不确定
2、vc可能销毁
3、如果专门创建一个vc作为全局事件总线使用，又浪费内存
安装总线 Vue.prototype.$bus = this(vm) 写在beforCreate
在接收数据的组件当中，找到总线，给总线绑定事件，事件的回调就留在了本组件
在发送数据的组件当中，找到总线，触发总线身上绑定的事件，本质就是调用函数，通过传参把数据传递给其它组件
4、消息的订阅和发布（pubsub）
和全局事件总线都是任意组件通信的方式
vue2当中不用 因为有全局事件总线，使用它会增大包的体积，最终效率低
它不需要去Vue.use，因为它是一个第三方包，第三方包是不需要use的
直接引入就可以使用，它里面有两个方法 publish和subscribe
在接收数据的组件当中需要调用subscribe 方法去订阅 PubSub.subscribe('消息名/频道名',callback)
在发送数据的组件当中需要调用publish去发布 PubSub.publish('消息名/频道名'，数据参数)
注意：
1、订阅和发布的时候消息名字 要一致
2、callback(msg,data) msg代表消息名，就算不用也要占位 ，第二个参数才是你传递的数据
5、插槽
默认插槽（匿名插槽）
使用方式一:<template v-slot:default>/<template #default> 子组件：占个位置 因为此刻还不知道显示什么 回头知道的时候再填位置的位置，默认插槽 再使用这个组件时 可以再组件标签内部书写结构 这些结构最终会渲染再slot标签的位置上<!-- <slot><h1>标题</h1></slot> -->
具名插槽
具名插槽使用方式:父组件<template v-slot:test>/<template #test>
子组件：具名插槽 给slot组件标签起了个name属性 之后使用组件时如果指定某些结构放在具名插槽这个位置上 v-slot:name属性的值
作用域插槽
1.数据在父组件
2.父组件把数组给到子组件 子组件进行v-for展示
3.子组件展示的结构或者样式不由子组件说了算 由父组件决定
4.父组件决定子组件的结构或者样式时 需要用到子组件回传过来的数据
5. 渲染结构顺序 以子组件的solt的顺序进行执行
6、vuex
vuex是vue的集中（共享）状态管理工具，可以用来做组件通信
适用于所有场合
vuex的核心概念一共是6个： state mutations actions getters modules plugins
1、state是存储状态数据
2、mutations 是直接修改state状态数据
mutations当中能不能写异步？ 面试题
可以写异步，但是不建议，因为浏览器安装vue-devtools工具，在监视数据变化的时候就是监视 mutations函数调用，如果写了异步，那么监视的时候就监视不到了，数据的改变，就没有根据了
3、actions 当中一般都是异步请求的逻辑
1）、和组件进行连接 组件当中通过dispatch
2）、提交mutations，让mutations去修改数据
4、getters 简化state的数据操作，和组件当中computed的get一致
5、modules（namespaced） 模块化,作用是可以让状态数据管理更加清晰方便，而且数据不会发生覆盖
没有使用模块化的时候
总的state {a:100,b:200}
使用模块化的时候
总的state {shiyu:{a:100},yongxing:{b:200,a:300}}
namespaced决定在捞数据和调用函数的时候有改变
没有用他但是用到模块化
mapState({
a:state => state.shiyu.a
})
dispatch('fn')
使用了命名空间
mapState('shiyu',['a'])
mapState('yongxing',['b'])
dispatch('yongxing/fn')
6、plugins:插件，可以给vuex配置相关的插件
7、v-model
v-model使用再html标签上 一般都是表单类元素
v-model用在html标签身上代表双向数据绑定，等价于
:value="msg"和@input="msg = $event.target.value"的组合，value代表单向数据绑定，input事件是原生的dom事件
我们可以理解v-model就是value和input事件组合的简写
v-model使用再组件标签身上
v-model用在组件标签身上实现的父子组件双向数据同步
也是等价于:value="msg"和@input="msg = $event"的组合
但是此时:value和@input与用在html标签身上是不一样的，此时value代表props传参，input事件是自定义事件
注意：v-model在实现双向数据同步的时候只能同步一个数据，所以才有了一会要讲的.sync
v-model组件通信方式其实本质是props和自定义事件的结合
8、.sync
原理和v-model一致
只是它可以实现多个数据的双向同步，v-model只能实现一个
9、和listeners
this.$attrs 是一个对象，这个对象里面是父组件传递的所有属性和属性值
除了props接收过的及样式相关的属性
this.$listener是一个对象，里面是所有的事件监听相关属性和属性值
这两个东西通常用于组件的二次封装
v-bind可以一次性把一个对象当中的属性和属性值展开进行绑定或者传递
10、children和$refs
this.$parent 可以拿到父组件对象，进而可以操作父组件当中数据和方法
this.$children可以拿到所有的子组件对象组成的数组
注意：this.只能拿到一个父组件对象，如果这个组件有多个父组件对象，只能拿到一个，无法拿到你指定的，因此官方推荐不用，children拿到的是子组件对象的数组，但是顺序不确定，因此也不推荐使用只有对所有的子组件对象同样的操作，我们才会使用。
$refs它可以让我们拿到指定的子组件对象进行父向子通信，只要拿到指定的子组件对象，就可以操作子组件的数据和方法
ref用在html标签身上，通过this.$refs.xxx可以获取到真实dom元素
ref用在组件标签身上，通过this.$refs.xxx可以获取到组件对象
目录
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
