二次开发Vue组件遇到的问题
- 参数传递、事件传递
- 插槽传递
<template>
<el-drawer v-bind="$attrs" v-on="$listeners">
<!-- 插槽传递,footer也会传递过去 -->
<template v-for="s in Object.keys($slots)" :slot="s">
<slot :name="s" />
</template>
<!-- 过滤后传递, filter请自行判断 -->
<template v-for="s in Object.keys($slots).filter(s=> ['footer'].indexOf(s) === -1)" :slot="s">
<slot :name="s" />
</template>
<div v-if="$slots.footer" class="footer">
<slot name="footer" />
</div>
</el-drawer>
</template>
<script>
export default {
// 注意,$attrs中不会有props中的参数,会被过滤出来
props: {
title: {
default: "",
type: String
}
}
};
</script>