On August 5, 2021, Vue released the new version 3.2. The main highlight is the syntax of setup. If you have learned Vue3.0, when you build components using Vue3 syntax, you always need to return the method variables defined outside. It’s a bit more cumbersome, so Vue officially provides setup syntax candy this time, with which we can build components more succinct and comfortable.
Setup (syntax sugar)
1. Basic use
In Vue3.2 we no longer need to return. When using
To use this syntax, add the setup property to the
<script setup> import {ref} from 'vue' let property = ref(' zhisulu '); </script>Copy the codeThis code is compiled into the contents of the component Setup () function, which means that instead of executing only once when the component is first introduced, the code in
2. Automatic registration
When using the syntax of 3.2, if we need to import other components as before, we do not need to register them through components, we can import them directly. In the columns:
<template> <subassembly @getChili="getChili" :title="msg" /> </template> <script setup> import {ref} from 'vue' Subassembly import subassembly from './subassembly.vue' </script>Copy the code3. Component communication
DefineProps —-> [props for receiving from the parent component]The code shown in the column:
Parent component code:
<template> <div> I am the parent component ----1</div> <subassembly @getchili ="getChili" :title=" MSG "/> </template> <script setup> import {ref} from 'vue' import subassembly from './subassembly.vue' // pass the value to the subassembly --> :title=" MSG "<Home @getchili ="getChili" /> const MSG = ref(' parent ') </script>Copy the codeSub-component code:
<template> <div> I am a child component ----2</div> <div style="color: blue; Red ">{{props. Title}}</div> </template> <script setup> import {defineProps} from 'vue' const props = defineProps({ title: { type: String } }); Console. log(props. Title) </script>Copy the codeDefineEmit —-> [Child component passes to parent component events]The code shown in the column:
Sub-component code:
<template> <hr> <div> I am the child component ----2</div> < button@click ="toEmits"> Click to upload the parent component </button> </template> <script setup> import {defineEmitsref} from 'vue' const emits = defineEmits(['getChili']); Const toEmits = () => {emits('getChili',' child ')} </script>Copy the codeParent component code:
----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) // subcomponent value} </script>Copy the codeIn standard component writing, the child component’s data is implicitly exposed to the parent component, but in script-setup mode, all data is returned to template by default and is not exposed to the component, so the parent component cannot directly retrieve the child component’s data by mounting the ref variable. If you want to call child component data, you need to expose the child component to get it correctly, which is done by defineExpose.
DefineExpose —-> [Component exposes its own properties]The code shown in the column:
Sub-component code:
<template> <div> I am a child component ----2> {{xiaoZhi. Stator}}</div> </template> <script setup> import {ref, defineExpose, Reactive} from 'Vue' let xiaoZhi = reactive({STATOR: 'xiaoZhi ', age: 27}) let xiaoXiaoZhi = ref(' xiaoZhi '); console.log(xiaoXiaoZhi) defineExpose({ xiaoZhi, xiaoXiaoZhi }) </script>Copy the codeParent component code:
<template> < button@click ="shiEmots"> get exposed </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) The console. The log (' receiving ref critical leak out the value of the 'shields. Value. XiaoXiaoZhi)} < / script >Copy the codeResults:
Hook function
Introduction:
- Vue3 hook functions are equivalent to vue2 mixins, unlike hooks which are functions
- Vue3’s hook functions help us to improve code reusability by allowing us to use hooks functions in different components
In the columns:
1. First we need to create a file which contains hooks:
2. Under the Hookds file, we create a.js file that we need to use, for example, usepoint.js
Here we have a code in usePoint to get the mouse click position:
import {reactive, onMounted, OnBeforeUnmount} from 'vue' export default function () {let point = reactive({x: 0, y: reactive) {beforeunmount} from 'vue' export default function () { Function savePonint(event) {point.x = event.pagex point.y = event.pageconsole. log(event.pagex, OnMounted (() => {window.adDeventListener ('click', SavePonint)}) / / before the hidden call before unloading onBeforeUnmount (() = > {window. The removeEventListener (' click 'savePonint)}) return point}Copy the codeWe introduce this file code in the component as shown below:
< the template > < h2 > current sum: {{sum}} < / h2 > < button @ click = "sum++" > let me add the < / button > < hr > < h2 > current mouse click coordinates for: x: {{point. X}}, y: {{point. Y }}</h2> </template> <script> import {ref} from 'vue' import usePoint from ".. /hooks/usePoint"; Export default {name: 'App', setup() {// data let sum = ref(0) let point = usePoint() return {sum,point}},} </script>Copy the codeResults show:
In general, the purpose of the new Setup syntax sugar is to simplify the lengthy template code used with the Composition API, making the code simpler and more readable. The function of introducing and using custom hooks in components is similar to that of MIXin technology in VUe2. Advantage of custom hooks: it is clear about the source of reusable functional code, and it is more clear and easy to understand!
Thanks for reading! Welcome to discuss and learn from each other.