How to use sugar in setup syntax updated by vue3

In this article, the editor introduces in detail "how to use vue3 updated setup grammar sugar". The content is detailed, the steps are clear, and the details are handled properly. I hope this "vue3 updated setup grammar sugar how to use" article can help you solve your doubts.

Syntax sugar usage: / / add `setup` attribute to the ``code block / / the code in the `setup` code block will be compiled into the content of the component `setup` function / / it is so simple and clear about the experience brought by syntax sugar: 1. Automatic registration of components / / without using components, registration immediately after introduction, whether there is import MyComponent from'. / MyComponent.vue' 2. Attributes and methods do not need return// when using`` Any binding / / (including variables, function declarations, and content introduced by import) at the top level of the ``declaration can directly use the import {ref} from 'vue'// variable let msg = ref (' hellograms') / / function function log () {msg.value = "World!" in the template. Console.log (msg)} {{msg}} III. Automatically define the file name as the name attribute of the component

API provided by grammatical sugar

You must use defineProps and defineEmits API to declare props and emits in

1. DefinePropsconst props = defineProps ({foo: String}) 2, defineEmitsconst emit = defineEmits (['change',' delete']) / / emit ('change',' 1111') 3, defineExpose

If the child component instance is obtained through the ref='xxx' method in the parent component, and the child component is used, the data of the child component needs to be exported in the way of defineExpose, otherwise its properties will not be exposed

Import {ref} from 'vue'const a = 1const b = ref (2) defineExpose ({a, b})

It can be used with ordinary ones.

/ / normal, execute under the scope of the module (only once) / / declare additional options, such as custom component name export default {name: 'component 1'} / / code. This article "how to use setup Syntax Sugar updated by vue3" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.