11 2022 档案
摘要：// 1 main.current++ // 2 main.$patch({ current: 22, name: '妹妹' }) // 3 main.$patch(state => { // state.current++, (state.name = 'hahF') // }) // 4 mai
阅读全文
摘要：pinia 安装 官网： https://pinia.vuejs.org/zh/introduction.html 安装： npm i pinia -S // main.ts import { createApp } from 'vue' import { createPinia } from 'p
阅读全文
摘要：全局变量 // vue2 Vue.prototype.$http = ... // vue3 main.ts const app = createApp(App) type Filter = { priceFormat: (price: number) => string // ... } decl
阅读全文
摘要：自定义hook图片转base64 type Options = { el: string } export default function useBase64(options: Options): Promise<{ baseUrl: string }> { return new Promise(
阅读全文
摘要：vue3自定义指令 type Dir = { background: string } const vMove: Directive = { created() {}, beforeMount() {}, mounted(el: HTMLElement, dir: DirectiveBinding<
阅读全文
摘要：vue2 v-model // v-model 其实是一个语法糖 通过props 和 emit组合而成的 // 父组件props传递 <Child title.sync="父组件标题"/> <a-input v-model='keywords'/> // 子组件回传 this.$emit('upda
阅读全文
摘要：// github地址： https://github.com/antfu/unplugin-auto-import 1. npm i -D unplugin-auto-import 2. vite.config.ts import AutoImport from 'unplugin-auto-im
阅读全文
摘要：vue3_tsx语法 // 1、插件安装 npm install @vitejs/plugin-vue-jsx -D // 2、vite.config.ts配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v
阅读全文
摘要：vue3 Bus兄弟组件传参 type BusClass = { emit: (name: string) => void on: (name: string, callBack: Function) => void } type ParamsKey = string | number | symb
阅读全文
摘要：provide依赖注入 // provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。 // 只能在setup语法糖或者setup函数中使用，其他optionsApi只能使用配置方式 impor
阅读全文
摘要：异步组件 // index.vue import { defineAsyncComponent } from 'vue' const Dialog = defineAsyncComponent(() => import('./Dialog/index.vue')) // vue3 内置组件， 用于协
阅读全文
摘要：动态组件 import A from './A.vue' import B from './B.vue' import C from './C.vue' import { markRaw, reactive } from 'vue' type Tabs = { name: string comNam
阅读全文
摘要：父向子传递 // 父组件 <Child title="我是父组件的标题" :list="[1,2,3]" /> // 子组件接收 import { ref } from "vue"; type Props = { title: string; list: number[]; data?: numbe
阅读全文
摘要：vue3生命周期 import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, } from "vue";
阅读全文
摘要：computed import { computed, ref } from "vue"; const firstName = ref(""); const lastName = ref(""); const name = computed(() => firstName.value + lastN
阅读全文
摘要：// 只能修改响应式对象的值 const person = reactive({ name: "zhangsan", age: 18 }); // 将age属性单独提出来响应式数据 const ageCopy = toRef(person, "age"); const change = () =>
阅读全文
