javascript - 来个 vue 专家,看下如何操作下这种组件级别的虚拟节点?
问题描述:
基于 el-dialog
自己封装了一个 my-dialog
代码如下
<template> <el-dialog> <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot" /> </el-dialog> </template>
但是项目中很多代码都是这样的
- index.vue
<el-dialog> <Search/> </el-dialog>
- Search.vue
<template> <div> <div>body</div> 这里能保证 会有 slot='footer' 属性 <span slot="footer" class="add-footer"> <el-button>取消</el-button> <el-button>确定</el-button> </span> </div> </template>
也就是说 这个
footer
是默认插入在el-dialog
的default
插槽的,通过样式去实现的.
我现在想在my-dialog
中把footer
节点抽出来 放到el-dialog
的footer
插槽中,结果如下<el-dialog> <Search/> <span slot="footer" class="add-footer"> <el-button>取消</el-button> <el-button>确定</el-button> </span> </el-dialog>
但是 代码量实在太大,有没有大佬能从组件层面出发提供思路的?
以下是我大致的思路,抛砖引玉了
const [slots] = this.$slots.default //拿到默认插槽 const { componentInstance } = slots if (!componentInstance) return const vnodes = componentInstance._vnode.children const footer = vnodes.find(node => node.data?.slot === 'footer') // 拿到 默认插槽中 slot='footer'的节点 this.$slots.footer = [footer] // 把 footer节点 显示的赋值给 footer插槽 this.$forceUpdate()
第 1 个答案:
如果Search组件内又有子组件, 也有slot咋整 你算谁的
在docker-compose中,可以通过下面方式限定容器使用的资源,比如: deploy: resources: limits: cpus: "2.00" ...