美文网首页
9.slot插槽组件

9.slot插槽组件

作者: LucXion | 来源:发表于2023-10-24 20:14 被阅读0次
应用场景

子组件中某一个位置的组件由 父视图填充

// 使用步骤
// 1. 子组件 .js 中打开插槽功能
    options: {
        multipleSlots: true
    },

// 2. 子组件 .wxml 中,设置slot的名称和位置
<slot name="header"> </slot>
<view wx:for="{{list}}" wx:key="index">{{item.title}}</view>
<slot name="footer"> </slot>

// 3. 父组件 .wxml 中,在子组件内添加需要的组件,通过设置组件的 slot名称,来实现填充
    <list tag = "{{titleindex}}">
    <view slot = "header">这就是头部</view>
    </list>

相关文章

  • vue插槽

    默认插槽(没有名字的插槽) 具名插槽(带名字的插槽) 老版 2.6.0以前 新版 作用域插槽(父组件可以获取子组件...

  • Vue插槽

    Vue 插槽 插槽用于向组件传递内容,插槽内可以包含任何模板代码,包括 HTML,甚至组件。如果 组件 没有包含一...

  • slot-scope到底是什么

    插槽slot 插槽,也就是slot 插槽是组件的一块HTML模板 插槽就是要将父组件中的内容渲染到子组件中。就好像...

  • Vue中 的作用域插槽

    逻辑:父组件调用子组件的时候,给子组件传了一个插槽,这个插槽叫做作用域插槽,作用域插槽必须是template开头和...

  • 【前端Vue】05 - [插槽 ,前端模块化开发,webpack

    1. 插槽 1.1 插槽的基本使用 组件的插槽: 组件的插槽也是为了让我们封装的组件更加具有扩展性。 让使用者可以...

  • 插槽、rem适配

    一、插槽slot 普通插槽 子组件 具名插槽(有名字的插槽) 子组件 二、rem适配 一、rem与px 的换算计算...

  • 插槽

    ### 认识插槽 插槽:如果局部组件中有使用slot标标签的在父组件内可改变其值 ### 插槽默认值 如果设置插槽...

  • Vue学习笔记[12]-slot插槽和编译作用域

    为了使组件具有更多的扩展性,需要使用插槽,使用插槽的组件应为可复用的组件,若为不复用组件,则不应该使用插槽. 使用...

  • Vue进阶(插槽)

    插槽 插槽:父组件用来向子组件传递数据,我们使用UI库中常用到 1、普通插槽 (1)在父组件的子组件的两个标签中放...

  • Vue总结4-插槽,Vuex,VueRouter

    1.插槽 1.1匿名插槽 52-Vue组件-匿名插槽 ...

网友评论

      本文标题:9.slot插槽组件

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