vue3中的抽离封装方法实现
短信预约 -IT技能 免费直播动态提醒
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事件修改引入的值
<template>
<div>
<div class="main">
<div>vue3抽离封装:</div>
<div>name:{{res.name}}</div>
<div>age:{{res.age}}</div>
<div>company:{{res.company}}</div>
<el-button type="primary" block @click="handleClick">修改name</el-button>
</div>
</div>
</template>
<script>
import publicModule from "../../utils/publicModule"
export default {
setup() {
const res = publicModule();
console.log(res,"vue3抽离封装");
function handleClick(){
res.name = "马云"
}
return {
res,
handleClick
};
}
};
</script>
或者使用toRefs
<template>
<div>
<div class="main">
<div>vue3抽离封装:</div>
<!-- toRefs -->
<div>name:{{name}}</div>
<div>age:{{age}}</div>
<div>company:{{company}}</div>
<el-button type="primary" block @click="handleClick">修改name</el-button>
</div>
</div>
</template>
<script>
import publicModule from "../../utils/publicModule"
import {toRefs} from "vue"
export default {
setup() {
const res = publicModule();
console.log(res,"vue3抽离封装");
function handleClick(){
res.name = "马云"
}
return {
...toRefs(res),
handleClick
};
}
};
</script>
到此这篇关于vue3的抽离封装方法的文章就介绍到这了,更多相关vue3抽离封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
