slot

Overview

Represents a placeholder for distributed content.

Application Scope

Subelements

Supported.

Attributes

The following attribute is supported.

Slot Content

The slot element is used as the parent element of the part 1 subelement.

<template>
  <div>
    <slot></slot>
  </div>
</template>

The part1 subelement is introduced to the parent element index to define the distributed content. During rendering, the slot element in part1 will be replaced by the distributed content in the parent element.

<import name="part1" src="./part1.ux"></import>
<template>
  <div>
    <part1>
      <text>dynamic content form parent</text>
    </part1>
  </div>
</template>

Default Content

The default content can be set in the slot element.

<template>
  <div>
    <slot>
      <text>default content form part1</text>
    </slot>
  </div>
</template>

If no content in the parent element index needs to be distributed to the part1 element, the slot element in part1 will render its default content.

<div>
  <part1>
  </part1>
</div>

In addition, if content to be distributed is configured in the parent element but rendering does not take effect due to the if statement or other reasons, the slot element in part1 will render its default content.

<import name="part1" src="./part1.ux"></import>
<template>
  <div>
    <part1>
      <text if="{{showContent}}">dynamic content form parent</text>
    </part1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showContent: false
    }
  }
}
</script>

Compilation Scope

Parent element: index

<import name="part1" src="./part1.ux"></import>
<template>
  <div>
    <part1>
      <!-- The compilation scope of {{context}} is the parent element. -->
      <text>dynamic content form {{context}}</text>
    </part1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      context: 'parentVm'
    }
  }
}
</script>

Subelement: part1

<template>
  <div>
    <slot>
      <!-- The compilation scope of {{context}} is the subelement. -->
      <text>default content form {{context}}</text>
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      context: 'childVm'
    }
  }
}
</script>

Named Slot

In a subelement, slot elements with different name settings can be defined. If name is not set, default is used.

<template>
  <div>
    <div class="header">
      <!-- Put the header here. -->
      <slot name="header"></slot>
    </div>
    <div class="main">
      <!-- Put the body here. -->
      <slot name="main"></slot>
    </div>
    <div class="footer">
      <!-- Put the footer here. -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

In the parent element, set the slot attribute. If it is not set, default is used. Then, the content is distributed to the corresponding slot element.

<import name="part1" src="./part1.ux"></import>
<template>
  <div>
    <part1>
      <text slot="header">header content</text>
      <text slot="main">main content</text>
      <text slot="footer">footer content</text>
    </part1>
  </div>
</template>

<template>
  <div>
    <!--The setting of slotName is invalid.-->
    <slot name="{{slotName}}">
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slotName: 'slot1'
    }
  }
}
</script>

Version Change History