foreword
After reading this article, I assume that you have learned the basic syntax of vue3 and have a certain understanding of the composition API. The conventional writing method needs to return the variables and methods to be referenced in the template in the setup hook. If the code size is large enough, it will take a long time to write the return, and you have to dig down to find the place where the return is. The trouble is dead. This is also a very important complaint point that many vue2 friends feel that the use of vue3 is more troublesome.
However, after the vue3.2 version, the official launch of setup syntax sugar solves this problem. Mom no longer has to worry about me typing codes and breaking my fingers~
Let me give you a summary of the specific usage of setup syntax sugar:
Table of contents
1. Basic use
When used
<script setup>, the code inside will be compiled intosetup()the content of the component function. This means that<script>instead of being executed only once when the component is first imported,<script setup>the code in will be executed every time a component instance is created .
When used <script setup> , any <script setup> binding at the top level of the declaration (including variables, function declarations, and imports) can be used directly in the template:
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
<template>
<div @click="log">{
{ msg }}</div>
</template>2. Responsive
The ref response data setup() is the same as returning the value from the function. The value will be automatically unpacked when used in the template, and there is no need to use xxx.value to get the value.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{
{ count }}</button>
</template>3. Automatic registration
Imported content is also exposed in the same way. This means that the imported helper function can be used directly in template expressions, without the need to
methodsexpose it via an option:
In this way, after we introduce the component, we don't need to register it in the components option, and it can be used directly in the template. The variable name when imported is directly used as the label name of the custom component. Of course, the import method and variables are the same, and they can be used directly in the template.
<template>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
//这里我们引入了子组件 subassembly
import subassembly from './subassembly.vue'
</script>4. Component communication
Note: defineProps,defineEmits,defineExpose这三个api都是可以直接在 <script setup>里使用的，不需要引入。
-
defineProps: Instead of props, receive data passed by the parent component (the parent component passes parameters to the child component)
Code example:
Parent component code:
<template>
<div>我是父组件----1</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//把值传递给子组件 ---> :title="msg" <Home @getChili="getChili" :title="msg" />
const msg = ref('父的值')
</script>
复制代码Subcomponent code:
<template>
<div>我是子组件----2</div>
<div style="color: red">{
{props.title}}</div>
</template>
<script setup>
import {defineProps} from 'vue'
//接收父组件 传过来的值！
const props = defineProps({
title: {
type: String
}
});
//打印一下 接收父组件的值
console.log(props.title) //父的值
</script>-
defineEmit replaces emit, and the child component passes data to the parent component (the child component exposes data to the outside)
Code example:
Subcomponent code:
<template>
<hr>
<div>我是子组件----2</div>
<button @click="toEmits">点击传到父组件</button>
</template>
<script setup>
import {defineEmits,ref} from 'vue'
//先定义一下子 在发送值
const emits = defineEmits(['getChili']);
const toEmits = () => {
emits('getChili','子的值')
}
</script>
复制代码Parent component code:
<template>
<div>我是父组件----1</div>
<div>{
{data}}</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//空值接收 子组件的传值
let data = ref(null)
const getChili = (e) => {
data.value = e
console.log(e) //子组件的值
}
</script>-
defineExpose : The child component exposes its own data, (the parent component gets the properties of the child component)
In the standard component writing method, the data of the child component is implicitly exposed to the parent component by default, but in the script-setupmode, all data is only returned to the template by default and will not be exposed outside the component, so the parent component cannot directly obtain the data of the child component by mounting the ref variable . If you want to call the data of the sub-component, you need to expose it in the sub-component before you can get it correctly. This operation is done by defineExpose .
Code example:
Subcomponent code:
<template>
<div>我是子组件----2> {
{ xiaoZhi.stator }}</div>
</template>
<script setup>
import {ref, defineExpose, reactive} from 'vue'
let xiaoZhi = reactive({
stator: '小志',
age: 27
})
let xiaoXiaoZhi = ref('小小志');
console.log(xiaoXiaoZhi)
defineExpose({
xiaoZhi,
xiaoXiaoZhi
})
</script>
复制代码Parent component code:
<template>
<button @click="shiEmots">获取暴露</button>
<subassembly ref="shield"/>
</template>
<script setup>
import subassembly from './subassembly.vue'
import {defineEmits,defineProps,ref} from 'vue'
const shield = ref()
const shiEmots = () =>{
//子组件接收暴露出来得值
console.log('接收reactive暴漏出来的值',shield.value.xiaoZhi)
console.log('接收ref暴漏出来的值',shield.value.xiaoXiaoZhi)
}
</script>5. Use the name attribute
Just write the name attribute directly on the <script setup> tag
<script setup lang="ts" name="xxx"></script>
6. Use useSlots and useAttrs
<script setup> The use of slots and attrs should be rare, since they can be accessed via $slots and in templates $attrs . In the rare scenario where you do need to use them, there are useSlots two useAttrs helper functions:
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
useSlots and useAttrs are real runtime functions that return values equivalent to setupContext.slots and setupContext.attrs , also available in the normal composition API.
at last
Other watch, watchEffect, life cycle and so on are the same as ordinary script usage, just import and use.
Well, after reading this article, have you learned the syntax sugar of setup? Hurry up and use it~ I think this article is helpful to you, and you can support it three times~