vue3中的任何一个组合式的api都可以单独抽离出去在另一个文件中,最后只需要回归到setup()中即可.
举个栗子
我的2个组件所需要的功能是一样的
都是显示马云公司的信息.
代码也十分类似:
VueDissociate1
:代码
<template>
<div>
<h1>vue抽离封装-父组件</h1>
<p>name:{{res.name}}</p>
<p>age:{{res.age}}</p>
<p>company:{{res.company}}</p>
</div>
<div>
<vue-dissociate2></vue-dissociate2>
</div>
</template>
<script>
import vueDissociate2 from "@/components/VueDissociate2";
import {reactive} from "vue";
export default {
name: "VueDissociate",
components: {
vueDissociate2
},
setup(){
const res=reactive({
name:'马云',
age:50,
company:'阿里巴巴'
})
return{res}
}
}
</script>
<style scoped>
div {
height: 200px;
border: red 1px solid;
}
</style>
VueDissociate2
:代码
<template>
<h1>vue抽离封装-子组件</h1>
<p>name:{{ res.name }}</p>
<p>age:{{ res.age }}</p>
<p>company:{{ res.company }}</p>
</template>
<script>
import {reactive} from "vue";
export default {
name: "VueDissociate2",
setup(){
const res=reactive({
name:'马云',
age:50,
company:'阿里巴巴'
})
return{res}
}
}
</script>
为了减少代码的冗余,于是我们就想到了使用了抽离分装的思想
2.抽离分装
创建一个公共的代码库,并且写好需要公用的代码
config/public.js
代码:
//公用的数据或者是方法
import{reactive,computed,watch} from "vue";
const public_code=()=>{
const res=reactive({
name:'马云',
age:50,
company:'阿里巴巴'
});
return res;
}
export default public_code
然后在需要公共调用的代码中调用公共代码:
VueDissociate1
:代码
<template>
<div>
<h1>vue抽离封装-父组件</h1>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>company:{{company}}</p>
<button @click="btn">点击修改代码</button>
</div>
<div>
<vue-dissociate2></vue-dissociate2>
</div>
</template>
<script>
import vueDissociate2 from "@/components/VueDissociate2";
import {reactive,toRefs} from "vue";
//引入公共代码
import public_code from "@/config/public";
export default {
name: "VueDissociate",
components: {
vueDissociate2
},
setup(){
const res=public_code();
function btn(){
res.name='马化腾'
}
//使用toRefs,可以直接输入属性名就可以了,不用点属性
return{...toRefs(res),btn}
}
}
</script>
<style scoped>
div {
height: 300px;
border: red 1px solid;
}
</style>
VueDissociate2
:代码
<template>
<h1>vue抽离封装-子组件</h1>
<p>name:{{ res.name }}</p>
<p>age:{{ res.age }}</p>
<p>company:{{ res.company }}</p>
</template>
<script>
import {reactive} from "vue";
import public_code from "@/config/public";
export default {
name: "VueDissociate2",
setup(){
const res=public_code()
return{res}
}
}
</script>
<style scoped>
</style>
展示效果: