美文网首页
鸿蒙app开发 组件封装类似vue插槽功能,@BuilderPa

鸿蒙app开发 组件封装类似vue插槽功能,@BuilderPa

作者: Fultom | 来源:发表于2024-05-16 13:44 被阅读0次

父组件自定义构建函数初始化子组件@BuilderParam装饰

@Component
struct Child {
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: () => void;

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`自定义组件 `)
  }

  build() {
    Column() {
      Child({ customBuilderParam: this.componentBuilder })
    }
  }
}
还有一种类型 :使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam

特别注意:此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性。

使用父组件@Builder装饰的方法初始化子组件@BuilderParam
@BuilderParam customBuilderParam: () => void;
此类型还可以使用()=>{}初始化,使用这种方式初始化必须使用 尾随闭包{}(@Builder装饰的方法)
@BuilderParam customBuilderParam: () => {}

@Component
struct Child {
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: () => void;
  //此类型还可以使用()=>{} 初始化,使用这种方式初始化必须使用 尾随闭包{}(@Builder装饰的方法)
  // @BuilderParam customBuilderParam: () => {}

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`自定义组件 `)
  }

  build() {
    Column() {
      Child(){
        this.componentBuilder()
    }
  }
}

相关文章

  • Vue3:Slot 插槽

    1、匿名插槽 1.1 什么是插槽 插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把...

  • vue-插槽

    1. 什么是插槽 插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由...

  • vue 插槽的使用、分类

    1. 什么是插槽 插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定、希望由用户指...

  • Vue插槽 自定义指令

    什么是插槽? 插槽(Slot)是vue为组建的封装者提供的能力,允许开发者在封装组件时,把不确定的、希望由用户指定...

  • Vue插槽

    插槽 插槽语法是Vue实现的内容分发API,用于复合组件开发。该技术在通用组件库开发中有大量应用。 匿名插槽 子组...

  • vue(2)

    Vue组件化开发 组件化开发的思想 组件的注册 组件间的数据交互 组件插槽的用法 Vue调试工具的用法 组件开发思...

  • React中如何运用类似Vue中的slot分发组件?

    在vue中,我们使用slot分发,来完成可组合组件,类似一个组件中有多个插槽,需要用哪些功能,就插入需要的功能。 ...

  • vue组件

    1,组件(component) 是vue最强大的功能之一,组件化开发2,vue组件可以扩展html元素,封装可重用...

  • vue 组件插槽

    一、vue插槽有什么用 插槽语法是vue中实现内容分发的api,用于复合组件开发。该技术在通用组件库开发中有大量应...

  • vue-插槽slot

    默认插槽 app.vue app是父组件,test是子组件 test.vue 要想让父组件的www显示,必须要在子...

网友评论

      本文标题:鸿蒙app开发 组件封装类似vue插槽功能,@BuilderPa

      本文链接:https://www.haomeiwen.com/subject/csuvfjtx.html