Vue2 第三弹 —— 事件总线、插槽

发表于 更新于
本文字数： 5.2k 阅读时长 ≈ 5 分钟

mixin 混入

功能：可以把多个组件公用的配置提取成一个混入对象。

定义混合

1
2
3
4
5
{
  data(){...},
  methods:{...}
  ....
}

使用混合

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增强 Vue

本质：包含一个 install 方法的对象，install 的第一个参数是 Vue，第二个以后的参数是插件的使用者传递的数据。

定义插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
对象.install = function(Vue,options){
  //1. 添加全局过滤器
  Vue.filter(...)

  //2. 添加全局指令
  Vue.directive(...)

  //3. 配置全局混入
  Vue.mixin(...)

  //4. 添加实例方法
  Vue.prototype.$myMethod = function(){...}
  Vue.prototype.$myProperty = xxxx
}

使用插件

1
Vue.use()

scoped 样式

作用：让样式在局部生效，防止冲突。

写法：<style scoped>

TodoList 案例

组件化编码流程

  1. 拆分静态组件：组件按功能点拆分，命名不要与 html 元素冲突。

  2. 实现动态组件：考虑好数据存放的位置，数据是一个组件在用，还是一些组件在用：

     一个组件在用：放在组件自身即可
 一些组件在用：放在他们共同的父组件上（状态提升）

  3. 实现交互：从绑定事件开始。

     props 使用场景：
 父组件==>子组件 通信
 子组件==>父组件 通信（要求 父先给子一个函数）

使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！
props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。

webStorage

存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）
浏览器端通过 Window.localStorage 和 Window.sessionStorage 属性来实现本地存储机制。

相关 API

1
2
3
4
5
6
7
8
xxxxxStorage.setItem('key','value') 
// 该方法接受一个 **键** 和 **值** 作为参数，会把键值对 **添加** 到存储中，如何键名存在，则 **更新** 其对应的值。

xxxxxStorage.getItem('key') //该方法接受一个 **键名** 作为参数，返回键名对应的值。

xxxxxStorage.removeItem('key') // 该方法接受一个 **键名** 作为参数，并把该键名从浏览器中删除。

xxxxxStorage.clear() // 该方法会 **清空** 存储中的所有数据。

备注：

  1. sessionStorage 存储的内容会随着浏览器窗口关闭而消失。
  2. localStorage 存储的内容，需要手动清除才会消失。
  3. xxxxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，则 getItem 的返回值是 null。
  4. JSON.parse(null) 的结果依然是 null。

组件自定义事件 emit

一种组件间的通信方式，适用于：子组件 ===> 父组件

使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）

绑定自定义事件

第一种方式，在父组件中:

1
2
3
<Demo @atguigu="test"/>
或 
<Demo v-on:atguigu="test">

第二种方式，在父组件中：

1
2
3
4
5
<Demo ref="demo"/>
...
mounted(){
  this.$refs.xxx.$on('atguigu',this.test)
}
 1. 若想让事件只触发一次可以使用 once 修饰符 或 $once 方法
 2. 触发自定义事件：this.$emit('atguigu',数据)
 3. 解绑自定义事件：this.$off('atguigu')
 4. 组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符。

注意：通过 this.$refs.xxx.$on(‘atguigu’,回调) 绑定自定义事件时，回调要么配置在 methods 中，要么用箭头函数，否则 this 的指向会出问题。

全局事件总线 $bus

一种组件间通信方式，适用于任意组件间通信。

安装全局事件总线

1
2
3
4
5
6
7
new Vue({
  ...
  beforeCreate(){
    Vue.prototype.$bus = this
  },
  ...
})

使用事件总线

接收数据：A 组件想要接收数据，则在 A 组件中给 $bus 绑定自定义事件，事件的回调留在 A 组件自身。

1
2
3
4
5
6
7
8
methods:{
  demo(data){
    ...
  }
},
mounted(){
  this.$bus.$on('xxxx',this.demo)
}

提供数据：this.$bus.$emit('xxxx',数据)

最好在 beforeDestroy 钩子中，用 $off 去解绑当前组件所用到的事件。

消息订阅与发布 pubsub

一种组件间通信方式，适用于任意组件间通信。

使用步骤：

  1. 安装 pubsub：npm i pubsub-js
  2. 引入：import pubsub from ‘pubsub-js’
  3. 接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的回调留在 A 组件自身。
    1
    2
    3
    4
    5
    6
    7
    methods(){
      demo(data){...}
      ......
      mounted(){
        this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
      }
    }
  4. 提供数据：pubsub.publish(‘xxx’,数据)
  5. 最好在 beforeDestroy 钩子中，用 Pubsub.unsubscribe(pid) 去取消订阅。

Vue 脚手架配置代理

方法一

在 vue.config.js 中添加如下配置：

1
2
3
devServer{
  proxy:"http://localhost:5000"
}
说明：
1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活地控制是否走代理。
3. 工作方式：若按照上述配置代理，若请求了前端不存在地资源时，那么该请求会转发给服务器（即优先匹配前端资源）。

方法二

编写 vue.config.js 配置具体代理规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  devServer:{
    proxy:{
      '/api1':{ //匹配所有以 '/api' 开头的请求路径
        target:'http://localhost:5000', //目标代理服务器
        pathRewrite:{'^/api1':''},
        changeOrigin:true
      },
      '/api2':{ //匹配所有以 '/api' 开头的请求路径
        target:'http://localhost:5001', //目标代理服务器
        pathRewrite:{'^/api2':''}
      },
    }
  }
}

  changeOrigin 设置为 true 时，服务器收到的请求头 hosts 为：localhost:5000
  changeOrigin 设置为 false 时，服务器收到的请求头 hosts 为：localhost:8080
  changeOrigin 的默认值为 true
说明：
1. 优点：可以配置多个代理，且可以灵活地控制请求是否走代理。
2. 缺点：配置略繁琐，请求资源时必须加前缀。

插槽 slot

作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

分类：默认插槽、具名插槽、作用域插槽

默认插槽

1
2
3
4
父组件中:
<Catagory>
  <div>html结构1</div>
</Catagory>
1
2
3
4
5
6
7
子组件中:
<template>
  <div>
    <!--定义插槽-->
    <slot>插槽默认内容...</slot>
  </div>
</template>

具名插槽

1
2
3
4
5
父组件中:
<Catagory>
  <template slot="center">html结构1</template>
  <template v-slot:footer>html结构2</template>
</Catagory>
1
2
3
4
5
6
7
8
子组件中:
<template>
  <div>
    <!--定义插槽-->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer">插槽默认内容...</slot>
  </div>
</template>

作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games 的数据在 Catagory 组件中，但使用数据所遍历出的结构由 App 组件决定）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
父组件中:
<Catagory>
  <template scope="scopeData">
    <!--生成的是 ul 列表 -->
    <ul>
      <li v-for="g in scopedData.games" :key="g">{{g}}</li>
    </ul>
  </template>
  <template v-slot:footer>html结构2</template>
</Catagory>

<Catagory>
  <template scope="{games}">
    <!--生成的是 ul 列表 -->
      <h4 v-for="g in games" :key="g">{{g}}</h4>
  </template>
  <template v-slot:footer>html结构2</template>
</Catagory>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
子组件中:
<template>
  <div>
    <!--定义插槽-->
    <slot :games="games">插槽默认内容...</slot>
  </div>
</template>

<script>
export default = {
  name:'Catagory',
  data(){
    return{
      games:['红色警戒','劲舞团','穿越火线','超级玛丽']
    }
  }
}
</script>
Vue2 第二弹 —— 数据劫持、生命周期、组件、props
Vue2 第四弹 —— Vuex、Vue-router