Vue3 项目工程-组件封装

组件封装的好处：代码可重复利用，维护方便，提升开发效率

定义公共组件首先在src目录下的components组件文件夹新建想要的文件

写公共组件和平常开发的页面区别不大，

定义defineComponent，

props里接收外部传参

components里可以引入其他组件

生命周期setup里放方法和实现类

执行的方法通过emit传回到外部

<tempalte>
  <div @click="add()"></div>
  <div @click="save()"></div>
    <tempalte #x11x>
      <div></div>
    </tempalte>
    <tempalte v-slot="x22x">
    </tempalte>
</tempalte>

<script lang="ts">
import {} form ''
import comFun form '../commonMethods' // 把常用的方法和响应式提取到公共方法里
/**
comFun 的写法
export function comFun(arg1,arg2){
    const comState= reactive({响应式参数....})
    const comeMethod= {}
    ....
    return{
        comState,comeMethod
    }
}
*/

export default defineComponent({
    name:'',
    props:{
    外部传来的数据1：{
            type:[String , Number],
            default:''
        }
    }
    component:{}
    emits:['传出去的方法']
    setup(props,{emit}){
        const state = reactive({响应式参数....})
        const methods = {
            方法1：()=>{
                emits('传出去的方法','你能收到吗')
            }
        }

        let {comState,comeMethod} = comFun(arg1,arg2) // 解构公共方法里的响应式对象和方法

        return{
           ...toRef(state), // 把响应式state里的每个参数拆解成单独的响应式
           ...methods，
           ...toRef(comState), // 把响应式state里的每个参数拆解成单独的响应式
           ...comeMethod
        }
    }
    
})
</srcprit>

<style lang="scss" scoped>
<style>

如果需要注册全局组件 需要在plugins里，往app.component注入

import 'xxx' from 'xxx.vue'
app.component('xxx',xxx)