抽象节点

有时,由于代码解耦等需要,一些节点对应的组件是不确定的。此时可以将它设置为一个抽象节点,它对应的组件可以由父组件来指定。例如:

export const childComponent = componentSpace.define()
  .generics({
    // 设置一个抽象节点
    item: true,
  })
  // 在模板中可以使用抽象节点
  .template(wxml(`
    <item />
  `))
  .registerComponent()

在使用含有抽象节点的组件时,需要指定抽象节点对应的实际组件,例如:

// 先定义一个抽象节点的实现组件
export const implItemComponent = componentSpace.define()
  .registerComponent()

// 使用组件时,传入 implItemComponent
export const myComponent = componentSpace.define()
  .usingComponents({
    child: childComponent,
    impl: implItemComponent,
  })
  .template(wxml(`
    <child generic:item="impl" />
  `))
  .registerComponent()

注意:使用 generic: 传入实现组件时,不能使用数据绑定。

定义抽象节点时,可以提供一个默认组件,如果父组件没有传入实现组件,则会转而使用这个默认组件,例如:

const defaultComponent = componentSpace.define()
  .registerComponent()

export const childComponent = componentSpace.define()
  .generics({
    item: {
      default: defaultComponent,
    },
  })
  .template(wxml(`
    <item />
  `))
  .registerComponent()

export const myComponent = componentSpace.define()
  .usingComponents({
    child: childComponent,
  })
  // 未指定 generic:item 时,默认组件将被使用
  .template(wxml(`
    <child />
  `))
  .registerComponent()