您现在的位置是：网站首页> 编程资料编程资料
vue3中的抽离封装方法实现_vue.js_
2023-05-24
335人已围观
简介 vue3中的抽离封装方法实现_vue.js_
vue3的抽离封装方法：
vue3中的任何一个组合式api都可以单独抽离出去在另一个文件，最后只需要回归到setup()中即可。
1.新建公共utils/publicModule文件
// 公共的数据和方法 import { reactive } from "vue" const publicModule = ()=>{ const res = reactive({ name:"马腾腾", age:50, company:"百度" }) return res } export default publicModule2.vue组件页面中引入使用
注意const res = publicModule()这里的值获取，容易写错获取不到；
点击handleClick事件修改引入的值
vue3抽离封装:name:{{res.name}}age:{{res.age}}company:{{res.company}}修改name
或者使用toRefs
vue3抽离封装:name:{{name}}age:{{age}}company:{{company}}修改name
到此这篇关于vue3的抽离封装方法的文章就介绍到这了,更多相关vue3抽离封装内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
相关内容
- Vue 中v-model的完整用法及原理_vue.js_
- 从reflect metadata理解Nest实现原理_node.js_
- 如何用nodejs搭建代理服务器_node.js_
- pnpm对npm及yarn降维打击详解_JavaScript_
- React路由拦截模式及withRouter示例详解_React_
- 关于react ant 组件 Select下拉框 值回显的问题_React_
- 利用vue+elementUI设置省市县三级联动下拉列表框的详细过程_vue.js_
- Vue中如何使用Map键值对传参详析_vue.js_
- elementui源码学习之仿写一个el-divider组件_vue.js_
- React实现下拉框的key,value的值同时传送_React_
