1***@qq.com
1***@qq.com
  • 发布:2023-06-27 14:32
  • 更新:2023-06-27 14:32
  • 阅读:274

封装第三方组件时,传递第三方组件的slot

分类:uni-app

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继承的方式。 ``` 
0 关注 分享

要回复文章请先登录注册