Data Option and Emits Option
Learn how to use the data and emits options in Vue 2 and Vue 3.
We'll cover the following
The data
option
In Vue 2, a data
option, as a value, can have an object or a function that returns an object. Support for the former was dropped in Vue 3, so the data
option must always be a function. Therefore, any time we create a component, we need to use a function.
The emits
option
Vue 3 has introduced a new option called emits
. It has two prominent use cases:
- First, it defines what kind of events a component emits to its parent.
- Second, because Vue 3 removed the
.native
modifier, all emitted events that aren’t defined in theemits
property are treated as native events and added to the component’s$attr
object. This change can occasionally result in two events being fired if a child component is re-emitting an event.
Get hands-on with 1200+ tech skills courses.