快應用 slot組件

類似于其他框架的內容分發(fā)，在快應用中也實現了一套內容分發(fā)的 API，我們可以使用slot?組件作為承載分發(fā)內容的出口。

插槽內容

在子組件 ?part1? 中，我們使用了 ?slot? 組件來承載父組件中定義的內容

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

運用 ?slot? 組件可以讓我們的組件變得更加靈活，可定制。

在父組件 ?index? 中，我們引入了子組件 ?part1?，并且在里面定義了分發(fā)內容。在渲染時，?part1? 中的 ?slot? 組件將會被父組件中的分發(fā)內容替換。

<import name="part1" src="./part1.ux"></import>

<template>
  <div>
    <part1>
      <text>dynamic content form parent</text>
    </part1>
  </div>
</template>

默認內容 

?slot? 組件中可以設置默認內容

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

在父組件 ?index? 中，如果沒有內容需要分發(fā)到 ?part1? 組件。此時子組件 ?part1? 中的 ?slot? 組件將會渲染該組件下的默認內容

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

同時，如果父組件中設置的分發(fā)內容但因為設置了 ?if? 或其他原因沒有實際的節(jié)點渲染，那么子組件 ?part1? 中的 ?slot? 組件也將渲染 ?slot? 組件下的默認內容

<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>

編譯作用域 

父級模板里的所有內容都是在父級作用域中編譯；子模板里的所有內容都是在子作用域中編譯。

父組件 ?index?

<import name="part1" src="./part1.ux"></import>

<template>
  <div>
    <part1>
      <!-- {{context}} 的編譯作用域在父組件 -->
      <text>dynamic content form {{context}}</text>
    </part1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      context: 'parentVm'
    }
  }
}
</script>

子組件 ?part1?

<template>
  <div>
    <slot>
      <!-- {{context}} 的編譯作用域在子組件 -->
      <text>default content form {{context}}</text>
    </slot>
  </div>
</template>

<script>
export default{
  data() { //運用 slot 組件可以讓我們的組件變得更加靈活，可定制。
    return {
      context: 'childVm'
    }
  }
}
</script>

具名插槽 

在子組件中，我們定義具有不同 ?name? 屬性的 ?slot? 組件。如果沒有設置，則默認的 ?name? 屬性為 ?default?。

<template>
  <div>
    <div class="header">
      <!-- 我們希望把頭部放這里 -->
      <slot name="header"></slot>
    </div>

    <div class="main">
      <!-- 我們希望把主要內容放這里 -->
      <slot name="main"></slot>
    </div>

    <div class="footer">
      <!-- 我們希望把尾部放這里 -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

在父組件中，通過設置 ?slot ?屬性，如果沒有設置，則默認的 ?slot? 屬性為 ?default?。然后根據 ?name? 和 ?slot? 的匹配，將內容分發(fā)到對應的 ?slot? 組件。

<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>

注意：目前 ?name? 和 ?slot? 屬性均不支持動態(tài)數據，如果使用可能導致實際渲染和預期不一致。

<template>
  <div>
    <!-- slotName 設置無效 -->
    <slot name="{{slotName}}">
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotName: 'slot1'
    }
  }
}
</script>

總結

運用 slot 組件可以讓我們的組件變得更加靈活，可定制。