codecamp

快应用 slot组件

类似于其他框架的内容分发,在快应用中也实现了一套内容分发的 API,我们可以使用slot​组件作为承载分发内容的出口。

插槽内容

在子组件 ​part1​ 中,我们使用了 ​slot​ 组件来承载父组件中定义的内容

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

运用 ​slot​ 组件可以让我们的组件变得更加灵活,可定制。

在父组件 ​index​ 中,我们引入了子组件 ​part1​,并且在里面定义了分发内容。在渲染时,​part1​ 中的 ​slot​ 组件将会被父组件中的分发内容替换。

<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​ 中,如果没有内容需要分发到 ​part1​ 组件。此时子组件 ​part1​ 中的 ​slot​ 组件将会渲染该组件下的默认内容

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

同时,如果父组件中设置的分发内容但因为设置了 ​if​ 或其他原因没有实际的节点渲染,那么子组件 ​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​ 的匹配,将内容分发到对应的 ​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​ 属性均不支持动态数据,如果使用可能导致实际渲染和预期不一致。
<template>
  <div>
    <!-- slotName 设置无效 -->
    <slot name="{{slotName}}">
    </slot>
  </div>
</template>

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

总结

运用 slot 组件可以让我们的组件变得更加灵活,可定制。


快应用 block组件
快应用 页面切换及参数传递
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }