HarryHY的博客

突破数据单向流动限制：子组件可向父组件回传数据，父组件基于这些数据自定义渲染逻辑。增强组件复用性：子组件提供 “渲染接口”，父组件通过插槽自定义具体实现。允许子组件向父组件传递数据，使父组件能够动态自定义子组件的渲染内容。子组件用 定义，父组件用 <template #xxx> 使用。普通插槽内容由父组件静态定义，作用域插槽内容动态依赖子组件数据。列表 / 表格组件、通用布局组件、需要动态内容的组件。允许父组件将内容精确分发到子组件的不同位置。高（内容可根据子组件数据变化）子组件向父组件传递动态数据。

父组件文件<sidebar @send-father-data="getChildData"></sidebar> //自定义一个send-father-data的事件 通过getChildData来接收子组件传过来的值//将子组件传过来的childValue赋值给定义的childData子组件</div>//通过defineEmits 来接收自定义事件。

counter.ts —— pinia文件。setup store更加灵活。main.ts中引入。获取store 使用。

params参数适合新闻or展示类的组件 在分页或者主页获取到文章ID或者详情ID 跳转到详情页 拿到ID请求整个详情页面的数据接口。query参数适合修改详情页面 在分页中拿到该数据所有的参数 带到详情页面将修改页面的初始值替换成具体参数。自动导入vue、vuerouter中的函数和方法。name属性对应了路由文件配置的name。path属性对应了路由的路径。

当父组件想要通过 ref 获取自组件里面的内容 需要自组件主动暴露出去 ——defineExpose。如果你的vue不是3.5则需要更新vue的版本 可以去看另外一个文章。使用ref方法const后面的命名需要跟页面的ref值一样。

【代码】Vue 自动导入函数和变量插件 unplugin-auto-import。

2.reactive数据 —— ref数据能监听的话 reactive一般都可以 ref的对象类型实际是用reactive实现的。watchEffect 不需要手动传入监听的值，它会自动监听回调函数中使用到的值 数据变化时重新执行该函数。watchEffect 监听多个值，当监听的值发生变化时，自动执行回调函数。watchEffect 会立即执行一次 并在依赖的数据变化时再次执行。watch 需要手动传入监听的值，数据变化时执行回调函数。3.函数的返回值 （getter函数）通过写法2来帮助理解。

在pasckjson中无法注释每个插件的用处 可以在vscode中下载一个JsonComments这样可以在json中添加注释方便日后维护和查阅API。这个由于是在开发环境下的一个插件 帮助我们支持name属性 所以需要是-D。

使用打包工具在帮我门分析打包结果进而来做优化在用vite打包是通过rollup来完成的。

【代码】VUE3点击展开下拉框。

【代码】vue星空背景组件。

在env.d.ts中添加下面。

--open在package.json中这是你的启动命令 npm run start 后面添加一个–open "start": "vue-cli-service serve --open",

下载lodashnpm i --save lodash引入lodashimport _ from 'lodash'; const _debounce = _.debounce(confirmMsg, 5000);//引入lodash功能 const confirmMsgfn = () => {//使用lodash _debounce() }踩坑https://blog.csdn.net/HarryHY/article/details/122007234全

路由懒加载在构建的时候已经给我们做了一个demo了 { path: '/user', name: 'user', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => im

如何在setup中调用生命周期钩子VUE3.0向下兼容了VUE2我觉得beforeCreate和created 更多的是被setup()代替了选项式 API Hook inside setupbeforeCreate Not needed*created Not needed*beforeMount onBeforeMountmounted onMountedbeforeUpdate onBeforeUpdateupdated onUpdatedbeforeUnmount

安装//查询当前vue cli版本vue --version//安装 vue cli //由于我这边是npm 还有yarn版本的 可以自行去官网查看安装教程 下面会放npm install -g @vue/cli//由于我之前的是2.4.5版本的 所以需要升级一下npm update -g @vue/cli查看vue -V 出现了 ‘vue’ 不是内部或外部命令,也不是可运行的程序//使用 git bash 安装 然后在查看版本npm install -g @vue/cli效果如

在启动的时候报错缺少依赖 Cannot find module 'fork-ts-checker-webpack-plugin-v5'package.jsondevDependencies "@vue/cli-plugin-typescript": "~4.4.0",重新 npm i 下载依赖即可参考文章：https://blog.csdn.net/weixin_44378370/article/details/111196739...