“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Remember when I first experimented with script Setup syntax sugar, the editor told me that this was an experimental proposal and that to use it, I needed a fixed Vue version.

At the end of June, the proposal was finalized. In V3.1.3, you can continue to use but still have a hint of the experimental proposal. In V3.2, the hint is removed and some deprecated apis are removed.

What is script setup?

It’s a new syntax sugar in Vue3, in the setup function. All ES module exports are considered values exposed to the context and are included in the setup() return object. The syntax is also much simpler than before.

It’s extremely simple to use, just add the setup keyword to the script tag. Example:

<script setup></script>
Copy the code

Automatic component Registration

In Script Setup, imported components can be used directly without registering through Components, and there is no way to specify the name of the current component. Instead, it is automatically based on the file name, so there is no need to write the name attribute. Example:

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>
Copy the code

If you want to define an attribute like name, you can add a flat script tag and do it inside.

The use of component core apis

The use of props

Get the props object of the context by specifying the current props type with defineProps. Example:

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>
Copy the code

Using emits

Use defineEmit to define the events contained in the current component and execute the emit using the returned context. Example:

<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change'.'delete'])
</script>
Copy the code

Get slots and ATTRs

Slots and ATTRs can be obtained from the context through useContext. However, after the proposal was formally approved, this syntax was abolished, and it was split into useAttrs and useSlots. Example:

/ / the old
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

/ / new
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>
Copy the code

defineExpose API

Traditionally, you can access the contents of a child component through an instance of a ref in the parent component, but this method is not available in a script setup. Setup acts as a closure, and no one can access the internal data and methods except the internal template template.

If you need to expose the data and methods in your Setup, use the defineExpose API. Example:

<script setup>
	import { defineExpose } from 'vue'
	const a = 1
	const b = 2
	defineExpose({
	    a
	})
</script>
Copy the code

Properties and methods do not need to return, directly use!

This can be one of the great advantages of the previous method of writing, the definition of data and methods, need to return at the end of the template to use. In Script setup, properties and methods defined do not need to be returned; they can be used directly! Example:

<template>
  <div>
   	<p>My name is {{name}}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Sam')
</script>
Copy the code

Write in the last

Writing is not easy. I hope I can get a “like” from you. If the article is useful to you, you can select “bookmark”. If there are any mistakes or suggestions in the article, please comment on it. Thank you. ❤ ️

Welcome to other articles

  • Actual: Implement a Message component with Vue3
  • Actual: Vue3 to implement the Image component, by the way, support lazy loading
  • One Piece, Vue.js 3.0 brings what updates
  • This article digests the major new features of ES7, ES8, and ES9
  • Technical team’s common problems and solutions
  • 10 new features commonly used in ES6