vue的抽离封装

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>

展示效果: