【笔记】vue3.x 组件引用自身

在开发过程中，遇到了组件引用自身的情况，在此记录一下需要注意的问题。

如何引用

需要给组件设置name，然后在模板中直接引用即可。

<template>
  <example-component></example-component>
</template>

export default {
  name: 'ExampleComponent'
}

可能遇到的问题

1. 控制台警告

[Vue warn]: Extraneous non-emits event listeners 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.

仔细阅读警告信息，我们可以推断出，这个问题应该是没有声明事件导致的。

export default {
  name: 'ExampleComponent',
  emits: ['item-click'], // 这里声明以后就不会报警告了
  setup(props, context) {
    const handleItemClick = () => {
      context.emit('item-click')
    }
    return {
      handleItemClick 
    }
  }
}