js实现事件总线、v-model表单绑定

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

事件总线

事件总线是跨越 js 模块和组件的

1. 提供监听某个事件的接口，
2. 提供取消监听的接口
3. 触发事件的接口（可传递数据）
4. 触发事件后会自动通知监听者

用原生 js 实现事件总线

const listeners = {};

// 事件总线，这里我们希望事件总线是一个对象
export default {
  // 监听某一个事件
  on(eventName, handler) {
    if (!listeners[eventName]) {
      // 避免有重复项
      listeners[eventName] = new Set();
    }
    // 则添加
    listeners[eventName].add(handler);
  },
  //   取消监听
  off(eventName, handler) {
    if (!listeners[eventName]) {
      // 如果需要取消的事件不存在
      return;
    }
    // 其实就是在数组中删除
    listeners[eventName].delete(handler);
  },
  //   触发事件(传递事件名称以及事件参数)
  emit(eventName, ...args) {
    if (!listeners[eventName]) {
      return;
    }
    for (const handler of listeners[eventName]) {
      // 循环调用函数
      handler(...args);
    }
  },
};

实际上 vue 内部实现事件总线要更加简单 当然在组件销毁时需要取消监听哦

v-model （专门用于表单元素）

v-model指令实质是一个语法糖，它是value属性和input事件的结合体

本质上就是将表单的value值与其数据data绑定，并且再表单的value值改变时，改变它的data,从而实现双向绑定的目的

<input :value="data" @input="data=$event.target.value" />
<!-- 等同于 -->
<input v-model="data" />

对于复选框（单选框）的选中效果，取决于这个复选框的 value 值是否存在于这个数组之中

v-model的修饰符：

详见：表单输入绑定

案例场景分析 2（表单绑定）

整个表单最终的结果内容如下图所示：

也就是说将整个表单的数据与表单相关联起来，数据改变表单的选中情况也要随之改变，反之也成立