instructions

There may be something wrong with this article. I just wrote this article according to my own ideas after reading the statement file after reading the introduction article of VitE2 written by others. I haven’t read the code of Vue, so I don’t know the principle of some parts.

  • Create a project:npm init @vitejs/apporyarn create @vitejs/app
  • Recommended environment: VScode + Volar (Workspace with Vetur disabled)

I. Use of components

After importing components, they can be used directly in the template without registering components in components.

<template>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>
Copy the code

Data Property and methods

Top-level variables and methods in Script can be used directly in templates without manual export.

<template>
  <HelloWorld :msg="msg" />
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
const msg="Hello Vue 3 + TypeScript + Vite"
function handleClick(s: string){
  console.log(s)
}
</script>
Copy the code

Third, Props

Define component Props using defineProps, the same usage as the previous Props definition.

<template>
  <div>{{ msg }}</div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from "vue";
defineProps({
  msg: String.propA: [String.Number].propB: {
    type: Boolean.required: true,},propC: {
    type: Object as PropType<{ a: string; b? : number }>,default: () = >{},}});</script>
Copy the code

4. Custom events

Define component custom events using defineEmit.

The first is a string array in which each string element is a custom event name defined.
<! -- HelloWorld.vue -->
<template>
  <div @click="$emit('myClick','test')">{{ msg }}</div>
</template>

<script setup lang="ts">
import { defineEmit, defineProps } from "vue";
defineProps({
  msg: String}); defineEmit(['myClick'])
</script>
Copy the code
<! -- App.vue -->
<template>
  <HelloWorld :msg="msg" @myClick="handleClick"/>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
const msg="Hello Vue 3 + TypeScript + Vite"
function handleClick(. args: any[]){
  console.log(args)
}
</script>
Copy the code

The first method is easy to use, but there is a problem. The default type of the custom event method is set to (… Payload: unknown[]) => unknown. The result is that the method used to set the response event must also be of this type, otherwise the TS will indicate that the type is not matched.

The second method of passing parameters is an object, under which the key name is a custom event name and the key value is a function.

The object key defined by defineEmit will be used as the function type for the custom key name event. Consciously this object key function will also be executed when the custom event is triggered. If you don’t need to customize what the child component does when the event is triggered, you can just define an empty function.

<! -- HelloWorld.vue -->
<template>
  <div @click="$emit('myClick', 'test')">{{ msg }}</div>
</template>

<script setup lang="ts">
import { defineEmit, defineProps } from "vue";
defineProps({
  msg: String}); defineEmit({myClick(s: string) {
    // This function is also executed when a custom event is triggered
    console.log(123456); }});</script>
Copy the code
<! -- App.vue -->
<template>
  <HelloWorld :msg="msg" @myClick="handleClick"/>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
const msg="Hello Vue 3 + TypeScript + Vite"
function handleClick(s: string){
  console.log(s)
}
</script>
Copy the code

Get context

Use useContext to get the current component context

<template>
  <div @click="$emit('myClick', 'test')">{{ msg }}</div>
</template>

<script setup lang="ts">
import { defineEmit, defineProps} from "vue";
import {useContext} from 'vue'
defineProps({
  msg: String}); defineEmit({myClick(s: string) {
    console.log(); }});console.log(useContext());
</script>
Copy the code

One thing to note here is that defineProps and useContext can’t be imported in the same import syntax, otherwise Vite will get an error, I just realized I don’t know why.