The background of new features
Before understanding how it is used, you can first understand some of the background of its launch, which can help you compare the similarities and differences in the development experience and understand why there are new things in this chapter.
In the .vue component of Vue 3.0, the SFC specification requirements are followed (Note: SFC, that is, Single-File Component, .vue single component), the standard setup usage is that if the data defined in the setup needs to be used in template, it needs to be returned.
If you are using TypeScript, you need helpdefineComponentTo help you automatically deduce types.
<!-- Standard component format -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup () {
// ...
return {
// ...
}
}
})
</script>
For instructions and usage of standard setup and defineComponent, you can checkA brand new setup functionOne section.
The launch of script-setup is to allow users familiar with 3.0 to develop components more efficiently and reduce some mental burden. Just add a setup attribute to the script tag, and the entire script will directly become a setup function, and all top-level variables and functions will be automatically exposed to the template (no more return one by one).
Last time I wrote about my feelings about using vue3 for the first time, and also obtained the teachings of a group of bigwigs. The most important one is the syntax sugar of the method. In order to figure out this syntax sugar, I refactored the previous page again. Sure enough, I got the law of true fragrance. After using it, I found that vue3 can also have the simple processing method and value transmission like react. If you don’t say much, please read the code.
Internal variables
First, let’s look at the internal variable changes. This is simply using setup before
<template>
<div>
<div>
In the subcomponentString：{{infor}}
</div>
<div>
In the subcomponentobj：{{}}
</div>
<div>
In the subcomponentarry：{{arry[0]}}
</div>
<div @click="changeInfor">
Changeobj
</div>
</div>
</template>
<script>
import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
export default {
setup(){
const infor = ref('infor')
const obj = reactive({
data:'obj'
})
const arry = reactive([111,222,333])
const changeInfor = () =>{
= 'changeObj'
}
return {
infor, obj, arry, changeInfor
}
}
}
</script>
<style>
div{
line-height: 40px;
}
</style>This is the code after changing it to syntax sugar
<template>
<div>
<div>
In the subcomponentString：{{infor}}
</div>
<div>
In the subcomponentobj：{{}}
</div>
<div>
In the subcomponentarry：{{arry[0]}}
</div>
<div @click="changeInfor">
Changeobj
</div>
</div>
</template>
<script setup>
import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
const infor = ref('infor')
const obj = reactive({
data:'obj'
})
const arry = reactive([111,222,333])
const changeInfor = () =>{
= '32323'
= 'changeObj'
}
</script>
<style>
div{
line-height: 40px;
}
</style>It can be clearly seen here that the method of not using setup-script is still very different from the traditional one. The structure is simple and clear, and there is no need to write a large number of variables and methods in the setup function. The degree of freedom is very high, which is a bit like the usage method in react class.
Child parent value
This mainly involves three methods: defineEmits, defineProps, and defineExpose
// Parent component<template>
<div>
Parent component
<children ref="child" @getData="sentData" :data="data"/>
<div>{{childData || 'I haven't received the value yet'}}</div>
<div @click="makeClid">Click to call the subcomponent method</div>
</div>
</template>
<script setup>
import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
import children from './components/'
const childData = ref('')
const data = ref('The value given by the parent component prop passes the value')
const sentData = (data) =>{
= data
}
const child = ref(null) // Get the child component ref const makeClid = () =>{
('Subcomponent has been called')
}
</script>
// Subcomponents<template>
<div>
{{fatherData || 'The parent component has not called me yet'}}
<div @click="getData">触发Parent component</div>
<div>fatherProps:{{fatherProps}}</div>
</div>
</template>
<script setup>
import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
const fatherData = ref('')
const fatherProps = ref('')
const props = defineProps({ // Parent component passes value data:String
})
=
const emit = defineEmits(['getData']) // Accept parent component data const getData = () =>{
emit('getData','Value given to the parent component') // Method to trigger the parent component }
const setData = (val) =>{ // Parent component call = val
}
defineExpose({ // Throw method getData,
setData
})
</script>- The child component calls the parent component: This is easy to understand, it is similar to vue2. The parent component is mounted @getData, and the child component is obtained through the defineEmits method. The final call method is the same as before.
- Parent component calls child components: This is still very different. The child component needs to define a good method first, and then expose it through defineExpose. The parent component creates a ref. The variable name that needs to be created here and the ref name of the child component are always there. Otherwise, the corresponding method can not be obtained.
Summarize
This is all about this article about the setup-script application in vue3. For more related vue3 setup-script application content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!