preface

Vue3 has been online for a long time, many of you have already used vue3. Did you find the process a bit tedious when using the vue3composition API? For example, when you define a method and find that the template needs it, you must return the method. When there are a lot of methods and properties in a component, this process can be very uncomfortable.

What is a Setup script

Setup Script is one of vue3’s new syntactic candy, which is used by adding a setup modifier to a script tag when it is written.

<script setup></script>
Copy the code

Doesn’t it look simple?

What does a setup script do

What is the use of adding a setup to a script? Then look!

1> Automatically register child components

What do you mean?

There are now two components, Father. Vue and Child child.vue.

Vue3 grammar

<template>
  <div>
    <h2>I'm the parent!</h2>
    <Child />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'

export default defineComponent({
  components: {
      Child
  },
  setup() {

    return{}}});</script>
Copy the code

The vue3 syntax can be used only after the Child component is registered in the components.

The setup script writing

<template>
  <div>
    <h2>I'm the parent! -setup script</h2>
    <Child />
  </div>
</template>

<script setup>
import Child from './Child.vue'

</script>
Copy the code

Isn’t the comparison clear enough? The child component registration process is omitted.

2> Properties and methods do not return

The main point is that the composition API is a bit cumbersome to write because you need to manually return the properties and methods that the template needs to use. This step can be omitted in the Setup script. Take a look at the following example.

Vue3 grammar

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('CoCoyY1')
    const age = ref(18)

    const ageInc = () = > {
      age.value++
    }

    return {
      name,
      age,

      ageInc
    }
  }
})
</script>
Copy the code

The setup script writing

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

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

const name = ref('CoCoyY1')
const age = ref(18)

const ageInc = () = > {
  age.value++
}

</script>
Copy the code

Wow, isn’t that very convenient?

3> Supports props, emit, and context

If you look at this and you’re like, how do I get props and context without setup()? Come on!

Vue3 grammar

//Father.vue
<template>
  <div >
    <h2 >I'm the parent!</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup(props, context) {
    const childCtx = (ctx) = > {
      console.log(ctx);
    }

    return {
      childCtx
    }
  }
})
</script>


//Child.vue
<template>
  <span @click="handleClick">I am a child component! -- msg: {{ props.msg }}</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: [
    'child-click'].props: {
    msg: String
  },
  setup(props, context) {
    const handleClick = () = > {
      context.emit('child-click', context)
    }

    return {
      props,
      handleClick
    }
  },
})
</script>
Copy the code

Click on the component to see what’s printed.

The context was obviously successfully printed, which is the syntax of VUe3.

The setup script writing

//Father.vue
<template>
  <div >
    <h2 >I'm the parent!</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script setup>
import Child from './Child.vue';

const childCtx = (ctx) = > {
  console.log(ctx);
}
</script>


//Child.vue
<template>
  <span @click="handleClick">I am a child component! -- msg: {{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
  msg: String
})

const handleClick = () = > {
  emit('child-click', ctx)
}
</script>
Copy the code

Click on the child component to see if the context prints correctly with syntactic sugar.

Here you can see that the context is printed, with the attrs, emit, props, slots, expose properties, and methods still available.

That’s right, the Setup Script syntax sugar provides three new apis for us to use: defineProps, defineEmit, and useContext.

DefineProps is used to receive the value props from the parent component. DefineEmit is used to declare the triggered event list. UseContext is used to get the component context.

Is the setup script simpler than the two?

But!!

Notice the order in which I introduce the three apis, and at this point if I putuseContextPut it at the end, so….

Error reported!!

This should be a bug, can’t think of any other explanation.

That’s how vue3’s new syntax sugar Setup Script works. I think this syntax candy should become a formal content, because it is really convenient and concise.

Write it at the end (^.^)

If you think my writing is good, you can give me a thumbs up

If there is a wrong place, write bad place also please point out, for me to correct.

I’m CoCoyY1, a front-end enthusiast for documenting your learning.

My other articles

The Expose function in Vue3———— controls the object content exposed when the component is ref