Vue3 Setup Script Emit

Posted on  by admin
< script setup > is a new syntax sugar from Vue3.

The type is the suggestion in Vue's Git RFC. It should be made clear that this is not intended to completely replace any current writing. Its purpose is to provide developers with more concise syntax and simplify the lengthy template code when using the Composition API to write its single file component.


If your component template uses few variables, this situation can be reluctantly accepted. However, when the variables and methods gradually increase, it is undoubtedly a boring thing to return after setup every time. You will also face great challenges when refactoring the code.

To solve this problem, vue3 added script setup syntax.

After using < script setup >, the same function is realized.


In the original words of the RFC, "the main goal of this proposal is to reduce the verbosity of the use of the Composition API within SFC by directly exposing the context of < script setup > to the template."

This is what we just saw. We don't need to care about the value returned in the setup method (because sometimes we should forget to return the value we need in the setup, so the template can't get the corresponding value).

We can simplify the code.

In script setup, component import is automatically registered:. The component registration step is omitted, and there is no explicit action to export variables.

Props needs to be defined by using defineProps.

The usage is similar to that of props before. Emit uses defineEmit to define events that a component can emit. useContext accesses the slots and properties of the component. defineProps/defineEmit will make simple type inference based on the passed value. Define props – as the name suggests, it allows us to define props for components;. Define emits – defines the events that a component can emit.

useContext – the slots and properties of the component can be accessed.

Instructions are the same as components. They are automatically registered when imported.

The default value is true. In this case, the attribute bindings of the parent scope that are not recognized as props will be "fallback" and applied to the root element of the child component as an ordinary HTML attribute.

If await is used, it needs to be used with suspend asynchronous component. Volar is a vscode plug-in to enhance the vue writing experience. Using volar plug-in can get the best support for script setup syntax. To learn more about script setup, click?? Added by e11rof on Wed, 09 Mar 2022 03:49:19 +0200.


The following Pony component has two props (the ponyModel to display, and a isRunning flag).Based on these two props, a URL is computed for the image of the pony displayed in the template(via another Image component).The component also emits a selected event when the user clicks on it.

As a first step, add the setup attribute to the script element.Then, we just need to keep the content of the setup function:all the boilerplate can go away.You can remove the defineComponent and setup functions inside script:.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3 or ask your own question.