Vue项目中Quasar的q-input输入变更时未触发emit事件的原因是什么？

你遇到的问题是Quasar组件和原生input的事件传值规则不同导致的，具体有两个核心问题：

• 事件参数结构不匹配
  原生HTML <input> 的@input事件传递的是原生Event对象，需要通过e.target.value取输入值；但Quasar的<q-input>对事件做了封装，@input事件回调的第一个参数直接是输入框的当前文本值，没有封装成事件对象。你父组件中仍然写e.target.value，相当于从字符串值上读取不存在的target属性，得到undefined，因此状态更新失败，看起来就像事件没有触发。
• （可选优化）v-model用法不规范
  你父组件使用了Vue的v-model:name语法，按照官方规范，子组件只要emitupdate:name事件即可完成双向绑定，不需要额外自定义事件监听。

方案1：最小改动（保留现有自定义事件） #

仅修改父组件AddTask.vue的事件回调逻辑，直接使用事件返回的输入值即可：

<template>
    <ModalName 
       v-model:name="taskToSubmit.name" 
       @changeName:name="(val)=>taskToSubmit.name = val"
    />
</template>

方案2：规范v-model用法（更简洁） #

子组件ModalName.vue修改emit事件名： #

<template>
    <div class="row q-mb-sm">
        <q-input
            :value="name" 
            @input="$emit('update:name', $event)"
        />
    </div>
</template>

<script>
export default {
    props: ["name"],
}
</script>

父组件AddTask.vue直接删掉多余的事件监听： #

<template>
    <ModalName 
       v-model:name="taskToSubmit.name" 
    />
</template>

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