随笔分类 - Vue再出发
摘要：一、环境 1、下载 npm i mitt 2、配置 a、新建 src/utils/emitter.ts // 引入 import mitt from "mitt"; // 调用 const emitter = mitt() // 暴露 export default emitter 二、使用 1、触发
阅读全文
摘要：自定义组件 子组件触发，父组件接收 @xx=yy 自定义事件，子组件触发xx事件，父组件调用yy方法 1、触发(子组件) a、核心 // [] 可以是多个事件 let emit = defineEmits(["send-age", ]) // 触发 emit("send-age", 666) b、案
阅读全文
摘要：一、注意： 一般父传子，子传父也可以，但是太麻烦，一般子传父，用自定义组件 二、使用 1、发送(父组件) <Student :age="19"/> 2、接收(子组件) defineProps(['age'])
阅读全文
摘要：一、安装 npm install pinia 二、构建(main.ts) 1、引入 2、生成 3、使用 import { createApp } from 'vue' import App from './App.vue' import router from '@/router' // 1.引入
阅读全文
摘要：一、区别 1、获取路由器 let router = useRouter() 2、使用 router.push({ name:'detail', query:news }) 二、案例 <template> <ul> <button v-for="news in newList" :key="news.
阅读全文
摘要：一、params简写 1、路由 props: true 注意：只能params传参可以使用 { name:'detail', path:'detail/:id/:name/:content?', component:()=>import('@/views/Detail.vue'), props: t
阅读全文
摘要：一、区别 let route = useRoute() 注意： 1、params参数可选可不选，参数占位后面+? 2、path占位符 3、使用name 二、案例 1、跳转 <template> <ul> <RouterLink :to="{ name:'detail', params: news }
阅读全文
摘要：一、区别 没有 this.route let route = userRoute() route 相当于 this.route 二、路由 <template> <ul> <RouterLink :to="{ path:'/news/detail', query:news }" v-for="news
阅读全文
摘要：一、安装 npm i vue-router 二、创建 1、新建 src/router/index.ts index.ts import {createRouter, createWebHashHistory} from 'vue-router' // 配置路由 const router = crea
阅读全文
摘要：作用：功能分开 1、创建 src/hooks/useSum.ts 2、uesSum.ts文件 import { onMounted, ref } from 'vue'; // 属性、方法写在一个函数里 export default ()=>{ let num = ref(0) function ad
阅读全文
摘要：父传子 父组件 <template> <Person :age="age" /> </template> <script lang="ts" setup name="App"> import { ref } from 'vue'; import Person from './components/P
阅读全文
摘要：使用 <div ref="test"></div> import {ref} ... let test=ref() 子组件传值 父组件 子组件 <template> </template> <script lang="ts" setup name="Person"> import { reactiv
阅读全文
摘要：一、原理 recative对象结构赋值 p = recative({k:v, a:b}) // p.v 和 p.a是响应式数据 let {k, a} = p // 相当于 let k = p.k let a =p.a， k和a不是响应式数据 二、解决方案 p = recative({k:v, a:b
阅读全文
摘要：1、问题 reactive重新分配对象，即赋值，数据失去响应式 2、举例 let a=reactive({xxx}) a = {新值} a变成非响应式数据 3、解决 let a = reactive({xx}) Object.assign(a, {新值}) a还是响应式数据
阅读全文
摘要：一、语法糖 <script lang="ts" setup> </script> 优点：不用写return 缺点：组件名称冗余或无法命名 二、解决方案 1、安装 npm i vite-plugin-vue-setup-extend 2、配置 vite.config.ts import VueSetu
阅读全文
摘要：1、版本管理(nvm) #显示可下载的列表 nvm list available # 下载 指定版本号 nvm install 版本号 # 查看 已安装版本 nvm list # 切换版本 nvm use 版本号 2、创建命令 npm create vue@latest
阅读全文
摘要：proxy: { [process.env.VUE_APP_BASE_API + '/admin']: { target: 'http://39.98.123.211:8170', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_A
阅读全文
摘要：一、设置 main.js // 1.引入 import * as API from '@/api'; new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this // 2.原型 Vue.prototype.$AP
阅读全文
摘要：<div ref="test"></div> // 获取DOM this.$ref.test
阅读全文
浙公网安备 33010602011771号