componentInstance - 指向自定义指令绑定的组件

context - 指向自定义指令所在的组件

Vue.directive('my-model', {
  // bind 钩子：当指令首次绑定到元素时调用
  bind(el, binding, vnode) {
    // 获取绑定的值，例如 v-my-model="message"
    const key = binding.expression;
    // 设置元素的初始值
    el.value = vnode.context[key];

    // 定义事件处理函数
    const eventHandler = function(event) {
      // 更新 Vue 实例的数据
      vnode.context.$set(vnode.context, key, event);
    };

    // 添加事件监听器，监听通过 $emit 抛出的任意事件
    vnode.componentInstance.$on(binding.arg || 'input', eventHandler);

    // 存储事件处理函数，以便在 unbind 钩子中移除
    el._myModelEventHanlder = eventHandler;
  },
  // update 钩子：当绑定值更新时调用
  update(el, binding, vnode) {
    // 确保元素的值与数据保持一致
    const key = binding.expression;
    el.value = vnode.context[key];
  },
  // unbind 钩子：当指令与元素解绑时调用
  unbind(el, binding, vnode) {
    // 移除事件监听器
    vnode.componentInstance.$off(binding.arg || 'input', el._myModelEventHanlder);
  }
});