vue3封装element-ui-plus组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3封装element-ui-plus组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近看视频学习封装公共组件，将学习的内容记录以下，方便以后cv。

下面跟未来的自己说：

先说思路再放代码嗷，我怕你以后忘了。要cv直接往最后拉。

一、封装Drawer:抽屉组件

思路：

其实主要是通过slot去接收父组件传递过来的模板。父组件引用了组件件，往里面传了个表单，子组件就显示表单，传了个按钮，就显示按钮。来一段官方文档。

vue3封装element-ui-plus组件

上面是父组件给子组件传模板。下面我们思考几个问题。

1. 如何点击父组件的按钮让子组件弹出来。

2. 实际开发中，项目中共用一个组件，组件头部内容不一样，组件宽度不一样，组件的很多属性、事件都不一样，如何动态捏。

一个一个解决：

先解决第一个：如何点击父组件的按钮让子组件弹出来。

因为我的v-model绑定的数据是在子组件里面定义的，父组件想要用子组件里面的定义的事件，我们就可以使用vue3新增的属性 “defineExpose” 。官网是这样说的：

vue3封装element-ui-plus组件

我擦！这我能理解什么意思？？？

百度一番我懂了。啥意思呢，就是vue文件默认是是关闭的，里面的方法你在其他vue文件里面直接调用肯定是不行的，这个方法可以将组件中指定的方法暴露出去，你就能用了。

上代码：

1.父组件代码：

<template>
  <div>
    <el-button type="primary" @click="open">抽屉</el-button>

    <drawer ref="drawerRef" title="抽屉头部" size="50%" @submit="submit" conText="父组件测                    
       试">
    </drawer>
  </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import drawer from './drawer.vue';

const drawerRef = ref(null)

const open = () => {
  drawerRef.value.open()
}
</script>

2. 子组件代码

<template>
    <div>
        <el-drawer v-model="drawer" :title="title" :direction="left" :size="size">
            <slot></slot>

            <el-button @click="submit">{{ conText }}</el-button>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from "vue"
const drawer = ref(false)

const open = () => drawer.value = true
const close = () => drawer.value = false

defineExpose({
    open,
    close
})
</script>

解释一下上面代码，先看子组件，再看父组件。

1. 子组件定义俩个方法，open是打开，close是关闭。分别让drawer的v-model = true和false。

2. 通过defineExposeApi将open和close方法暴露出去。

3. 在父组件上定义一个ref属性。将他赋给drawerRef变量，我们就可以通过drawerRef.value.open( )拿到这个事件。写个打开事件直接调用就好了。

真就这么简单！！！无语，官方文档说的我看一年都不知道什么意思。

但是第一个问题就此解决。下面我们想第二个问题。

既然是共用组件，我父组件在调用子组件，子组件如何根据不同的父组件显示不同的头、屁股、方法呢。

difineProps：子组件接收父组件传过来的值。

difineEmits: 子组件接收父组件传过来的方法。

解决了，这不就全解决了，插会儿腰

具体怎么实现呢，element-plus的drawer有一些属性：

title：显示的标题

modal：是否显示遮罩层

direction：打开的方向

size：打开的大小默认30%

将这些v-bind绑定传过去，子组件通过difineProps接收。

将这些数据赋值就好了

抽屉里面写了个按钮，父组件里面写了方法。

父组件通过自定义事件给他传过去。

子组件通过difineEmits拿到父组件传过来的的方法，点击的时候调用这个方法就ok

至此，思路都缕明白了，脑海一片清晰，写完了发现也就那么回事。嘿嘿

下面，直接上全部代码。

父组件

<template>
  <div>
    <el-button type="primary" @click="open">抽屉</el-button>

    <drawer ref="drawerRef" title="抽屉头部" size="50%" @submit="submit" conText="父组件测试">
      <el-color-picker v-model="color1" />
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </drawer>
  </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import drawer from './drawer.vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const drawerRef = ref(null)
const color1 = ref('#369149')

const open = () => {
  drawerRef.value.open()
}

const submit = () => {
  console.log('这是在父组件定义的方法，子组件触发了');
}


</script>



<style scoped>
.read-the-docs {
  color: #888;
}
</style>

子组件

<template>
    <div>
        <el-drawer v-model="drawer" :title="title" :direction="left" :size="size">
            <slot></slot>
            <el-button @click="submit">{{ conText }}</el-button>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from "vue"
const drawer = ref(false)

const open = () => drawer.value = true
const close = () => drawer.value = false

const props = defineProps({
    title: String,
    size: {
        type: String,
        default: '45%'
    },
    conText: {
        type: String,
        default: '测试'
    }
})

const emit = defineEmits(['submit'])
const submit = () => emit('submit')

defineExpose({
    open,
    close
})

</script>

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

尾篇：