12. (vue3.x+vite) $attrs and $listeners communication methods between components

Front-end technology community general directory (please check this blog before subscribing)

Example effect

Changes in $attrs in vue3

$listeners has been removed and merged into $attrs. $attrs now includes class and style attributes. In other words, $listeners no longer exists in vue3. $listeners exist separately in vue2. In vue3 $attrs includes class and style attributes, but in vue2 $attrs does not include class and style attributes.

$attrs in vue2

In Vue 2, attrs contains all the data passed by the upper component (except style and class). When a component declares prop, attrs contains the remaining data after excluding the data in prop. Combined with inheritAttrs:false, the passed data can be applied to other elements instead of the root element.

Parent component code

<template>
  <div