美文网首页
小程序 slot插槽

小程序 slot插槽

作者: 晓函 | 来源:发表于2021-03-15 19:55 被阅读0次

组件wxml的slot

在组件的wxml中可以包含 slot 节点,用于承载组件使用者提供的wxml结构。
默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用

<view>  
  <my-components>
 
      <!-- 匿名插槽 父级里直接写内容 -->
      <view>我是匿名插槽内容</view>
      
      <!-- 我是个有名字的插槽 -->
      <view slot="myslot">我是个有名字的插槽</view>
  
  </my-components>
</view>

需要使用多slot时,可以在组件js中声明启用

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
})

具名插槽
此时,可以在这个组件的wxml中使用多个slot,以不同的 name 来区分。

<view>

  <!-- 匿名插槽 在子组件 控制其显示位置-->
  <slot></slot>
  
  <!-- 有名插槽 定义的有名称这里调用也得有名称 同时开启multipleSlots为true -->
  <slot name="myslot"></slot>

</view>

相关文章

  • 小程序 slot插槽

    组件wxml的slot 在组件的wxml中可以包含 slot 节点,用于承载组件使用者提供的wxml结构。默认情况...

  • 插槽

    默认插槽: 具名插槽:slot name='footer' 作用域插槽:v-slot===slot-scope 默...

  • 2-6 vue 匿名插槽-slot

    匿名插槽-slot Slot插槽 —— 实现内容分发 什么是slot?slot的意思是插槽,其目的在于让组件的可扩...

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • 插槽

    插槽的基础使用,

  • 插槽slot

    插槽,占位符slot具名插槽,指定占位符slot、name作用域插槽,子组件占位符向父组件占位符通信。slot、s...

  • vue slot匿名插槽 / 具名插槽 / 作用域插槽

    slot 匿名插槽 slot 具名插槽 应用场景 slot 作用域插槽: 在父组件中可以获得子组件的数据,并在父组...

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • 在vue中使用插槽

    slot 插槽

  • vue slot插槽

    v-slot 插槽的用法: 单个slot内容时: 子组件: 父组件: 多个slot内容时(具名插槽): 子组件: ...

网友评论

      本文标题:小程序 slot插槽

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