vue3
<script lang="ts">
import Exentds from '@/components/slot/Exentds.vue';
import { h } from 'vue'
export default {
props: {
},
setup(props,ctx) {
// 返回渲染函数
return () => h(Exentds,null,ctx.slots)
}
}
</script>
vue2
<script>
import Exentds from '@/components/Exentds/index';
export default {
name:"exentds-slot",
props:["num","max"],
functional: true,
// 无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。一个函数式组件
render(h,ctx){
console.log(ctx.data)
return h(Exentds,ctx.data,ctx.children)或return h(Exentds,ctx.data,ctx.slots().default,ctx.slots().main)
}
}
</script>
slot的嵌套
vue2/3
<template>
<Exentds>
<template v-slot:default>
<slot></slot>
</template>
<template v-slot:main>
<slot name="main"></slot>
</template>
</Exentds>
</template>
<script setup lang="ts">
import Exentds from '@/components/slot/Exentds.vue';
</script>
extend继承
vue2/3
<script lang="ts">
import Exentds from '@/components/slot/Exentds.vue';
// import { h } from 'vue'
export default {
props: {
},
extends:Exentds
}
</script>
注意:封装第三方组件时,除了第三方组件外,还需添加其他元素或组件
如:
<div>
<p>1</p>
<testTag></testTag>
</div>
<p>2</p>
那就不能使用extend继承的方式。 ```

1***@qq.com
- 发布:2023-06-27 14:32
- 更新:2023-06-27 14:32
- 阅读:274
封装第三方组件时,传递第三方组件的slot
分类:uni-app
0 个评论
要回复文章请先登录或注册