封装好组件之后想修改组件部分内容的做法

现在封装显示的内容

我想实现的内容

但是大家如果自己封装 过的话 都会知道 牵一发而动全身

别的页面的新增按钮都会变成新增/绑定，这是不可取的。

首先我先介绍一下我这个封装的方法，实现的方式：

 这是在页面中使用的方法：

<ListHandleBtns class="mb-5" :list="handleBtnsList" :disabledList="handleBtnsDisabled" @callback="callbackHandle"></ListHandleBtns>

// 操作按钮 'add','edit','remove','refresh','query','import','export'
const allHandleBtns = ['edit','remove','query'];
// 根据权限 显示的按钮列表
let handleBtnsList = computed(()=>{
console.log(GlobalStore)
    return allHandleBtns.filter(btn=>{
        let permi = permiStr.value + btn;
        return GlobalStore.checkPermi([permi]);
    })
});
// 禁用的按钮列表
let handleBtnsDisabled = computed(()=>{
    let arr = [];
    if(!checkedRowKeys.value.length){
        arr = ['edit','remove'];
    }
    if(checkedRowKeys.value.length == 1){
        arr = [];
    }
    if(checkedRowKeys.value.length > 1){
        arr = ['edit'];
    }
    return arr;
})

下面是封装的按钮的组件： 

<div v-if="btnList && btnList.length">
    <n-space justify="space-between">
        <n-space>
            <n-button type="primary" v-if="btnList.includes('add')" :disabled="disabledList.includes('add')" @click="onClick('add')">
                <template #icon>
                    <n-icon>
                        <IconPark type="plus"></IconPark>
                    </n-icon>
                </template>
                新增
            </n-button>
            <n-button type="info" v-if="btnList.includes('edit')" :disabled="disabledList.includes('edit')" @click="onClick('edit')">
                <template #icon>
                    <n-icon>
                        <IconPark type="edit"></IconPark>
                    </n-icon>
                </template>
                编辑
            </n-button>
            <slot name="balabal"></slot>
            <n-button type="error" v-if="btnList.includes('remove')" :disabled="disabledList.includes('remove')" @click="onClick('remove')">
                <template #icon>
                    <n-icon>
                        <IconPark type="delete-one"></IconPark>
                    </n-icon>
                </template>
                删除
            </n-button>
            <n-button type="info" secondary v-if="btnList.includes('import')" :disabled="disabledList.includes('import')" @click="onClick('import')">
                <template #icon>
                    <n-icon>
                        <IconPark type="link-left"></IconPark>
                    </n-icon>
                </template>
                导入
            </n-button>
            <n-button type="success" secondary v-if="btnList.includes('export')" :disabled="disabledList.includes('export')" @click="onClick('export')">
                <template #icon>
                    <n-icon>
                        <IconPark type="link-right"></IconPark>
                    </n-icon>
                </template>
                导出
            </n-button>
            <slot name="left"></slot>
        </n-space>
        <n-space>
            <slot name="right"></slot>
            <n-button type="info" secondary circle @click="onClick('refresh')">
                <template #icon>
                    <n-icon>
                        <IconPark type="refresh"></IconPark>
                    </n-icon>
                </template>
            </n-button>
            <n-button type="primary" secondary circle v-if="btnList.includes('query')" @click="onClick('query')">
                <template #icon>
                    <n-icon>
                        <IconPark type="search"></IconPark>
                    </n-icon>
                </template>
            </n-button>
        </n-space>
    </n-space>

</div>

应该能看明白吧。这是我原来的  在allHandleBtns数组中加上add之后就会出现“新增”按钮
如果想实现我们想要的的话：

首先我们在封装的组件中：

找到我们想要修改的地方：我想要在新增按钮之前修改其内容：

同时在想要修改的页面添加：

这样页面就会实现我们需要的效果了。

如果我们想要在  将 编辑的文本  修改成 修改   

这样就修改好了。

棒棒棒！