插槽 定义：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式（父 ---> 子）分类：默认、具名、作用域使用方式：（1）默认插槽<!-- 父组件 --> <Category> <div> html结构 </div> </Category> <!-- 子组件 --> <template> <div class="category"> <!-- 定义一个插槽，当使用者没有传递具体结构时，使用默认值填充 --> <slot>默认插槽</slot> </div> </template>（2）具名插槽<!-- 父组件 --> <Category> <template v-slot:center> <div> html结构1 </div> </template> <template v-slot:footer> <div> html结构2 </div> </template> </Category> <!-- 子组件 --> <template> <div> <!-- 定义一个插槽，当使用者没有传递具体结构时，使用默认值填充 --> <slot name="center">默认插槽</slot> <slot name="footer">默认插槽</slot> </div> </template>（3）作用域插槽​ a. 定义：数据在组件的自身，但数据生成的结构由组件的使用者决定（list数据在Category 组件中，但使用数据遍历出来的结构由App组件决定）​ b. 使用：<!-- 父组件 --> <Category> <template slot-scope="{games}"> <ul> <!-- 无序列表 --> <li v-for="(item,index) in games" :key="index">{{ item }}</li> </ul> </template> </Category> <Category> <template slot-scope="{games}"> <ol> <!-- 有序列表 --> <li v-for="(item,index) in games" :key="index">{{ item }}</li> </ol> </template> </Category> <!-- 子组件 --> <template> <div> <!-- 定义一个插槽，当使用者没有传递具体结构时，使用默认值填充 --> <slot :games="games">默认插槽</slot> </div> </template> <script> export default { name: "MyCategory", // 数据在组件自身 data() { return { games: ['魔兽争霸', 'QQ飞车', 'Dota自走棋', '地下城与勇士'] } } } </script>注：作用域插槽也可以添加name属性，使用时同理具名插槽

配置代理 方式一在vue.config.js中添加如下配置：devServer: { proxy: 'http://localhost:5000' }注：（1）该方式配置简单，但不能配置多个代理，且不能灵活的控制请求是否走代理​ （2）当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）方式二devServer: { proxy: { '/api': { target: 'http://localhost:5000', //路径重写 pathRewrite: {'^/api':''}, ws: true, //用于空值请求头中的host值（默认值为true） changeOrigin: true }, '/demo': { target: 'http://localhost:5001', pathRewrite: {'^/demo':''}, ws: true, changeOrigin: true } } }注：可以配置多个代理和灵活的控制请求是否走代理（请求时必须加上前缀）

过度与动画 作用：再插入、更新或移除DOM元素时，在合适的时候给元素添加样式名语法：（1）准备样式元素进入的样式v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点（2）使用<transition>包裹要过度的元素，并配置name属性<transition name="demo"> <h1 v-show="isShow"> 孙笑川 </h1> </transition>（3）注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都需要指定key值

nextTick 语法：this.$nextTick(回调函数)作用：在下一次DOM更新结束后执行指定的回调什么时候用？当数据改变后，需要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

消息订阅与发布（pubsub） 定义：一种组件间的通信方式，适用于任意组件间通信引入：npm i pubsub-js接收数据：methods() { demo(msgName,data) { ...... } } mounted() { //订阅消息 this.pubId = pubsub.subscribe('xxx', this.demo) }提供数据：pubsub.publish('xxx', data)注：最好在beforeDestroy钩子函数中，使用pubsub.unsubscribe(this.pubId)取消订阅

全局事件总线（GlobalEventBus） 定义：一种组件间的通信方式，适用于任意组件间通信安装全局事件总线new Vue({ ...... beforeCreate() { //安装全局事件总线 Vue.prototype.$bus = this } })使用：（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，且回调留在A组件自身methods: { demo(data) { ...... } } mounted() { this.$bus.$on('xxx', this.demo) }（2）提供数据：this.$bus.$emit('xxx', data)注：最好在beforeDestroy钩子函数中，使用$off('xxx')解绑当前组件所用到的自定义事件

组件的自定义事件 定义：一种组件间的通信方式，适用于：子传父使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定自定义事件：（1）方式一：<Demo @getName="getName"/> 或 <Demo v-on:getName="getName"/>（2）方式二：<Demo ref="getName"/> mounted() { //this.xxx为回调方法 this.$refs.getName.$on('getName', this.xxx) }（3）若想让自定义事件只触发一次，可以使用once修饰符或$once方法触发自定义事件：this.$emit('getName', 参数)解绑自定义事件：解绑一个：this.$off('getName')解绑多个：this.$off(['getName', 'getAge'])组件上可以使用native修饰符绑定原生DOM事件注：通过this.$refs.getName.$on('getName', this.xxx)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数

webStorage 存储内容一般5MB左右（不同浏览器之间存在差异）；浏览器端通过window.sessionStorage 或 window.localStorage属性来实现本地存储机制API（1）xxxStorage.setItem(key,value) 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名已存在，会更新其对应的值；（2）xxxStorage.getItem(key) 返回键名对应的值；（3）xxxStorage.removeItem(key) 从存储中删除对应的值；（4）xxxStorage.clear() 清空存储中的所有数据；注：（1）sessionStorage存储的数据会随浏览器关闭而消失；​ （2）localStorage存储的数据需要手动清除；​ （3）xxxStorage.getItem(key) 如果对应的值不存在，则返回null；​ （4）JSON.parse(null)的结果依然为null；