vue3二次组件封装

vue3二次组件封装

我这里使用的UI组件库是antd3，对于二次组件封装需要解决的问题其实就是如何将原有组件的属性、事件、方法、插槽传递过去，直接看代码吧。

1、安装vue3

1安装vue3项目

npm create vue@3.x

2、安装UI库（Antd3）

注意：vue2封装和vue3封装是不同的

npm i --save ant-design-vue@3.x

查看一下我的安装情况：

3、上代码

自定义组件MyButton

<template>
    <div>
        <a-button v-bind="attrs" ref="btn">
            <template v-for="(val,key,i) in slots" :key="i" v-slot:[key]>
                <slot :name="key"></slot>
            </template>
        </a-button>
        <div>
            <slot name="btips" :msg="tipContent"></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, useAttrs, useSlots, onMounted } from 'vue';

const btn = ref(null)
//获取透传属性集
const attrs = useAttrs()
//获取透传插槽
const slots = useSlots()
//传递出去的参数
const tipContent = ref('小提示！')
let focus = null
//看看都有些什么
onMounted(() => {
  console.log('btn',btn.value)
  console.log('attrs',attrs)
  console.log('slots',slots)
})
 
//暴露出去
defineExpose({
    tipContent,
    focus
})
</script>

<style scoped>

</style>

全局注册组件main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

//全局注册
createApp(App).use(Antd).mount('#app')

使用组件App.vue

<template>
  <MyButton type="primary" danger ref="mybtn" >
    测试按钮
    <template #btips="row">
      <div class="msg" @click="changeTipContent">{{row.msg}}</div>
    </template>
  </MyButton>
</template>

<script setup>
import { ref } from 'vue';
import MyButton from './components/MyButton.vue'
const mybtn = ref(null)
const changeTipContent = ()=>{
  if(mybtn.value){
    console.log('mybtn',mybtn.value)
    mybtn.value.tipContent = '666'
  }
}
</script>

<style scoped>
.msg{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed salmon;
}
</style>

效果：

看看控制台都打印出了什么？

这就是vue3版本的二次封装,和vue2版本的差距貌似就是获取$attrs和$slots的方式不同。