开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 13434|回复: 1
收起左侧

[技术分享] uniapp slot插槽用法

[复制链接]
发表于 2021-11-11 18:37:07 | 显示全部楼层 |阅读模式   广东省揭阳市
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制


使用easycom 组件化配置方法pages.json中配置easycom

在pages.json对象默认加入这段代码进行easycom配置

[JavaScript] 纯文本查看 复制代码
"easycom": { //组件化配置
                "autoscan": true, //是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
                "custom": {
                        // "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
                        "uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件
                        "vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
                }
        }

在components文件中新建index-list文件夹和文件,这种格式就可以直接在代码里用组件而不需要引入和zc

1、默认插槽的使用:

slot-one组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <view>
    <view>我是子组件</view>
    <slot></slot>
  </view>
</template>

父组件引用slot-one组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <view class="slot-item">
    <slot-one>
      父组件插槽内容
    </slot-one>
  </view>
</template>
<script>
</script>
<style scoped>
 .slot-item{
   padding:50rpx;
 }
</style>


2、插槽内可以包含任何模板代码,包括 HTML:

slot-one组件如上不变。

父组件引用slot-one组件:

[JavaScript] 纯文本查看 复制代码
<view class="slot-item">
    <slot-one>
      <text style="color:red">插槽内可以包含任何模板代码,包括 HTML</text>
    </slot-one>
</view>

3、插槽内可以包含其它的组件,下面的内容来自slotTwo组件:

slot-one组件如上不变,slot-two组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <view class="slottwo">
    <view>slottwo</view>
  </view>
</template>

父组件引用slot-one组件,slot-one包含slot-two组件:

[JavaScript] 纯文本查看 复制代码
<view class="slot-item">
    <slot-one>
      <text style="color:red">插槽内可以包含其它的组件,下面的内容来自slotTwo组件</text>
      <slot-two></slot-two>
    </slot-one>
  </view>


4、后备内容:

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染,
但是如果我们提供内容,则这个提供的内容将会被渲染从而取代后备内容
slot-one组件(带有默认值):

[JavaScript] 纯文本查看 复制代码
<template>
  <view>
    <view>我是子组件</view>
    <slot>slot后备内容</slot>
  </view>
</template>

父组件引用slot-one组件:

[JavaScript] 纯文本查看 复制代码
<view class="slot-item">
    <slot-one>
    </slot-one>
 
    <slot-one>
      <text style="color:red">提供的内容将会被渲染从而取代后备内容</text>
    </slot-one>
  </view>

5、具名插槽:

有时我们需要多个插槽, 元素有一个特殊的 attribute:name,语法: ,用来定义额外的插槽
一个不带 name 的 出口会带有隐含的名字“default”
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称
v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
v-slot 只能添加在 上 ,绑定在其他元素上用slot="**"
slot-two组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <view class="slottwo">
    <view>slottwo</view>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </view>
</template>

父组件引用slot-two组件:

[JavaScript] 纯文本查看 复制代码
<view class="slot-item">
    <slot-two>
      <view>default:没有指定name的默认插槽的内容</view>
      <template v-slot:header>
        <text>header:我是name为header的slot</text>
      </template>
      <text slot="footer">footer:我是name为footer的slot</text>
    </slot-two>
  </view>

6、解构插槽 Prop:

绑定在 元素上的 attribute 被称为插槽 prop。
在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
slot-three组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <view>
    我是作用域插槽的子组件
    <slot :user="user" :city="city"></slot>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        user: [{name: 'Jack',sex: 'boy'},{name: 'Jone',sex: 'girl'},{name: 'Tom',sex: 'boy'}],
        city: [{name: '北京'},{name: '上海'},{name: '广州'}]
      };
    }
  }
</script>

父组件引用slot-three组件:

[JavaScript] 纯文本查看 复制代码
  <view class="slot-item">
    <slot-three>
      <template v-slot="{user,city}">
        <view v-for="(item, index) in user" :key="index">
          {{item.name}}
        </view>
        <view v-for="(item, index) in city" :key="index">
          {{item.name}}
        </view>
      </template>
    </slot-three>
  </view>

7、示例:

todoList组件:

[JavaScript] 纯文本查看 复制代码
<template>
  <ul>
    <li v-for="todoitem in todos" :key="todoitem.id">
      <!-- 我们为每个 todoitem 准备了一个插槽, 将 `todoitem` 对象作为一个插槽的 prop 传入。 -->
      <slot name="todo" :todoitem="todoitem">
        <!-- 后备内容 -->
        {{ todoitem.text }}
      </slot>
    </li>
  </ul>
</template>

父组件引用todoList组件:

[JavaScript] 纯文本查看 复制代码
  <view class="slot-item">
    <todo-list :todos="todos">
      <template v-slot:todo="{ todoitem }">
        <span v-if="todoitem.isComplete">✓</span>
        {{ todoitem.text }}
      </template>
    </todo-list>
  </view>
 
 
data() {
      return {
        todos: [{
          text: "aa",
          id: "aa",
          isComplete: true
        }, {
          text: "bb",
          id: "bb",
          isComplete: true
        }, {
          text: "cc",
          id: "cc",
          isComplete: false
        }]
      };
    },



结帖率:100% (6/6)
发表于 2021-12-1 18:24:46 | 显示全部楼层   广东省茂名市
谢谢分享。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表