Vue3中如何在自定义指令内访问并更新modelValue？

访问 modelValue #

在自定义指令的钩子函数（如mounted、updated）中，有两种方式获取modelValue：

• 通过vnode.props.modelValue直接读取绑定的属性值
• 当指令通过v-model绑定时，binding.value等价于当前的modelValue值

更新 modelValue #

Vue3 的v-model是语法糖，本质是绑定modelValue属性和onUpdate:modelValue事件。不能直接修改binding.value（它是只读的），必须调用onUpdate:modelValue回调函数来同步更新响应式数据。

修正后的代码示例 #

directives: {
  currency: {
    mounted(el, binding, vnode) {
      // 访问当前modelValue
      console.log('当前modelValue:', vnode.props.modelValue);
      console.log('binding.value对应modelValue:', binding.value);

      el.oninput = (e) => {
        const inputValue = e.target.value;
        // 校验输入是否为有效数字
        if (Number.isNaN(Number(inputValue))) return;

        // 获取更新modelValue的回调函数
        const updateModel = vnode.props['onUpdate:modelValue'];
        if (updateModel) {
          // 将输入转为数字后更新modelValue
          updateModel(Number(inputValue));
        }
      };
    },
  },
}

关键说明 #

• 仅修改el.value只会更新DOM显示，不会同步到Vue的响应式数据中，必须调用onUpdate:modelValue完成双向绑定同步。
• 调用onUpdate:modelValue前最好做存在性判断，避免指令未通过v-model绑定时出现报错。

内容的提问来源于stack exchange，提问作者Misael