Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use setup script in Vue3", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use setup script in Vue3" this article.

Preface

Vue3 has been released for a long time, I believe most front-end people have already played with it, one of the major features is the setup method, which allows us to combine our business logic and hooks very intuitively and conveniently. Variables returned in setup can be used directly in template. In most cases, most of our logic is concentrated in the setup method, so officials have provided an experimental way to write the content of setup directly in script, that is, setup script.

Use

Our previous components might look like this:

{{msg}} import {ref, defineComponent} from "vue"; import Card from ". / components/Card.vue"; export default defineComponent ({components: {Card,}, setup () {const msg = ref ("setup script"); return {msg};}})

Two things are done here, one is to import and register the component, and the other is to export a string to template for use.

When setup script is enabled, it looks like this:

{{msg}} import {ref} from "vue"; import Card from ". / components/Card.vue"; const msg = ref ("setup script")

The registration step of the component is omitted, and there is no explicit action to export variables.

Although it is an experimental feature, it can be used right out of the box. You only need to configure setup on script.

Derive variables & methods

All variables defined in setup script are automatically exported. Very convenient

Import {ref} from "vue"; const msg = ref ("setup script"); const handlerClick = () = > {console.log ("on click");}; using components

All components can be automatically registered after import:

Import Card from ". / components/Card.vue"; import Button from ". / components/Button.vue"; use props-defineProps

Using props requires the definition of defineProps, which is similar to the previous props writing:

Import {defineProps} from "vue"; const props = defineProps (['title',' content'])

Define the type for props:

Const props = defineProps ({title: String, content: {type: Stirng, required: true}})

How to use TS's annotations:

DefineProps (); use emits-defineEmit

Use defineEmit to validate and define events used in components:

Const emit = defineEmit (['onHeaderClick']) emit (' onHeaderClick', 'params') / / validate a pair of events const emit = defineEmit ({onHeaderClick: ({title}) = > {if (! title) {console.warn (' Invalid title') return false} return true}})

The specific usage is the same as before.

Use context-useContext

Use useContext to get the context:

Import {useContext} from 'vue'const {slots, attrs} = useContext ()

The slots attrs obtained is the same as that in the previous setup.

Instruction

Directive, like a component, import a custom registration:

Import {color} from'. / vColour'

The imported color is automatically mapped to the instruction v-color

Summary of import {color as superColor} from'. / v color'

The setup script code looks much simpler, and the development efficiency is greatly improved. Unfortunately, it is only an experimental feature, proposed at 2020-10-28, and has not yet been released.

But the good news is:

In any case, friends can experience a wave locally, which will improve their happiness as a whole.

Remember not to use it in a production environment.

The above is all the contents of the article "how to use setup script in Vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.