Vue框架在项目开发中如何实现组件的复用？

本文共计634个文字，预计阅读时间需要3分钟。

目录 + Vue + ElementUI + 使用 this.$confirm + async/await 封装 + 优化前后对比 + Vue ElementUI 组件封装思路 + 核心 + 示例步骤 + Vue + ElementUI + this.$confirm + async/await 封装 + 官网参考：https://element.eleme.cn/

目录

• Vue ElementUI this.$confirm async await封装
• 改造前
• async await改造后
• Vue elementUI组件封装思路
• 核心
• 示例步骤

Vue ElementUI this.$confirm async await封装

this.$confirm官网：

element.eleme.cn/#/zh-CN/component/message-box

改造前

    async test() {       console.log("111111");       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {         confirmButtonText: "确定",         cancelButtonText: "取消",         type: "warning",       })         .then(() => {           console.log("点击确定");             this.$message({             type: "success",             message: "删除成功!",           });         })         .catch(() => {           console.log("点击取消");             this.$message({             type: "info",             message: "已取消删除",           });         });       console.log("2222222");     },

async await改造后

async test() {       console.log("111111");       let confirmRes = await this.$confirm(         "此操作将永久删除该文件, 是否继续?",         "提示",         {           confirmButtonText: "确定",           cancelButtonText: "取消",           type: "warning",         }       ).catch(() => {});         if (confirmRes !== "confirm") {         console.log("点击取消");         return;       }       console.log("点击确定");       console.log("2222222");     }

一定要加上.catch(() => {});否则报错

Vue elementUI组件封装思路

核心

父子传值、slot插槽

插槽传值

<slot title=“123” name=“aaa”></slot>

父组件接收插槽值

<div slot=“aaa” slot-scope=“props” :value=“props.title”></div>

示例步骤

1、在components文件夹下新建一个MyComponent1文件夹，新建MyCompont1.vue

（以btn为例）

<template>   <el-button-group>     <el-button          v-for="(btn,index) in this.buttons"          :key="index"          :type="btn.type ? btn.type:'primary'"         :icon="btn.icon"          :size="btn.size?btn.size:'mini'"         @click="btn.click"     >         {{btn.label}}     </el-button>   </el-button-group> </template>

<script> export default {   name: 'MyComponent1', // name就是封装好后使用的组件名   props: {     buttons: {       type: Array,       required: true     }   } } </script>

2、components文件夹下新建index.js, 用于注册组件，也可以在main.js中注册，为了统一管理建议放在components中注册

3、然后main.js中引入，就可以直接使用了**

注册

import Vue from 'vue' import MyComponent1 from './MyComponent1/index.vue' //多个组件就多次注册 Vue.component(MyComponent1.name, MyComponent1) ''

使用

<template>   <div>     <MyComponent1 :buttons="buttons"></MyComponent1>   </div> </template>

<script> export default {   name: '',   data () {     return {       buttons: [{         label:'创建',         icon:'el-icon-circle-plus-outline',         click: ()=>{console.log('创建')}       },{         label:'修改',         icon:'el-icon-edit-outline',         click: ()=>{console.log('修改')}       }]     }   } } </script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。