vue3: 发出自定义事件的组件渲染时有警告

[yubaoquan]

问题

如果一个组件有自定义事件, 并且组件有不止一个根节点, 那么在渲染时, 即使使用了 defineEmits, 也会在控制台出现警告:

[Vue warn]: Extraneous non-emits event listeners (xxx, xxx, xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 

解决方案

有自定义事件的组件, template 中不要使用多节点, 应该使用单一节点

wrong

<template>
  <div>a</div>
  <div>b</div>
</template>

right

<template>
  <div>
    <div>a</div>
    <div>b</div>
  </div>
</template>