安装 yarn add pinia# 或者使用 npmnpm install pinia 使用 创建 store 新建 store / index.ts import {defineStore} from "pinia"export const useXxxStore = defineStore("TEST",{  state:()=&g…

全局变量和全局函数 在 main.js 中声明全局变量和函数 app.config.globalProperties.$env = "dev"; 使用 <script setup lang="ts">import {getCurrentInstance} from "vue"var app = getCurrentInstance();…

slot插槽 匿名插槽 & 具名插槽 子组件 <template>  <div>    <slot></slot>    <slot name="nameSlot"></slot>  </div>&…

全局组件 创建组件 GlobalComponent.vue <template> <h1>this is globalComponent</h1></template> 在 main.ts 中引入组件 import { createApp } from 'vue'import './style.css…

vue3 中的 v-model 是 props 和 emit 语法糖 props ： value --> modeValue event：input --> update:modelValue 默认的 v-model 子组件 <template>  <div class="container" v-show=…

使用 安装 yarn add @vitejs/plugin-vue-jsx 配置 vite.config.ts import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// ht…

动画属性 transition 通过 name 定义 class <template>  <button @click="flag = !flag">click</button>  <transition  name="xx">    <div …

slot插槽 匿名插槽 & 具名插槽 子组件 <template>  <div>    <slot></slot>    <slot name="nameSlot"></slot>  </div>&…

父子组件传值 子组件 <template>  <div>this is childComponent {{ title }}</div></template><script setup lang="ts">// 常规defineProps({   title:Strin…

生命周期 Vue3 setup 替代了 beforeCreate 和 created 两个生命周期 挂载onBeforeMountonMounted更新onBeforeUpdateonUpdated销毁onBeforeUnmountonUnmount 打印当前组件实例 <script setup lang="ts">import {ge…