Vue中子组件input数据传递到父组件的实现方法及$emit告警解决方案

问题根因 #

该告警由Vue3的两个规则触发：

1. 子组件模板包含input、button两个根元素，属于片段（Fragment）根节点，Vue无法自动将未声明的自定义事件绑定到指定根元素
2. Vue3要求所有自定义触发的事件必须在子组件的emits选项中显式声明，未声明的自定义事件会被判定为冗余监听器抛出告警

正确实现方案 #

方案1：显式声明emits选项（推荐） #

在子组件的导出配置中新增emits字段，声明需要触发的自定义事件即可，无需修改父组件代码，告警即可消除，原有传值逻辑可正常运行。修改后的子组件代码如下：

<template>
  <input v-model="userinput" /> 
  <button type="button" @click="transmitData">transmit</button>
</template>

<script>
export default {
  // 显式声明自定义事件
  emits: ['transmit-data'],
  data() {
    return {
      userinput: " dd",
    }
  },
  methods: {
    transmitData(event){
      this.$emit('transmit-data', this.userinput)
    }
  }
}
</script>

方案2：子组件改为单根节点 #

如果不需要声明emits，也可以给子组件的所有内容套一个公共根元素，让子组件变为单根节点，Vue即可自动继承事件监听器：

<template>
  <!-- 新增div作为唯一根元素 -->
  <div>
    <input v-model="userinput" /> 
    <button type="button" @click="transmitData">transmit</button>
  </div>
</template>

扩展：简化的双向绑定写法 #

如果仅需要同步子组件输入框的值到父组件，可直接使用Vue组件的v-model语法简化代码，无需手动编写事件触发和监听逻辑：

子组件代码

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

父组件代码

<template>
  <user-input v-model="childData" />
  <p>{{ childData }}</p>
</template>
<script>
import UserInput from "./components/UserInput.vue";
export default {
  name: "App",
  components: {
    UserInput,
  },
  data() {
    return {
      childData: " "
    };
  }
};
</script>

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