四、微信小程序-快速回顾 ( 组件、组件传值、插槽 )


一、组件


组件的概念在其他文章里已经记录过就不多说了,其主要是对画面中的某一部分布局进行提取从而提高复用性

1.1. 定义组件


组件的文件结构如下:

  1. 组件布局文件 wxml
  2. 组件逻辑文件 js
  3. 组件配置文件 json
  4. 组件样式文件 wxss

看到上面的组件文件结构后,可能会有疑问,这不是跟页面文件一样吗,没错,它们的结构就是一样的,不只结构
一样,语法也一样,真正用来区分这四个文件是页面文件还是组件文件的关键,其实取决于逻辑文件 js 中调用的函数,
我们之前调用 Page() 函数来指明相关文件为页面文件,现在需要调用 Component() 函数来指明相关文件为组件文件

与页面文件的函数 Page() 一样,Component() 函数也需要一个对象类型的参数,这个参数对象同样也包含了预定义
的属性和生命周期函数,常见的预定义内容如下,更多请参照 微信小程序-自定义组件

类型名称描述
属性data对象类型,组件的页面中需要使用的数据可以定义为该对象的属性
属性properties对象类型,可供外部传值的属性,组件的页面中也可以直接使用
属性methods对象类型,自定义函数可以定义在该对象内
方法ready组件生命周期函数-在组件布局完成后执行

示例:创建组件

1. 一般常以如下目录结构管理组件文件
组件结构
2. 定义组件逻辑文件:

// 调用组件函数
Component({
  // 定义组件的页面中要使用的数据
  data: {
    message: '这是定义在组件内的消息!'
  },
  // 组件内的自定义方法
  methods: {
    // 页面按钮点击事件
    handleTap() {
      const messageChange = '组件函数改变了消息!'
      this.setData({
        message: messageChange
      })
    }
  }
})

3. 定义组件布局文件,语法与页面布局文件一样:

<view>{{message}}</view>
<button bind:tap="handleTap">修改消息</button>

1.2. 页面布局文件中使用组件


页面布局文件中想使用定义好的组件只需要两步:

  1. 将要使用的组件声明在页面配置文件的 usingComponents 属性中,并给组件重新命名
  2. 在布局文件内通过重命名后的组件名调用组件

示例:页面布局文件中使用上面定义好的组件

1. 在页面配置文件中声明要使用的组件,../../components/home/Home 是组件文件的相对路径,HOME 是给组件重新
命名,这样页面布局文件中就可以使用这个名字来调用组件了:

{
  "usingComponents": {
    "HOME":"../../components/home/Home"
  }
}

2. 在布局文件内通过重命名后的组件名调用组件:

<HOME></HOME>

3. 运行效果:
页面布局文件中使用组件

二、组件传值


2.1. 向组件内传值


向组件内传值指的是,引用组件的页面向组件内部传值,也称父传子,使用步骤如下:

  1. 在组件逻辑文件中,将接收传值的属性定义在组件函数 Component() 的参数对象的 properties 属性中
  2. 在页面布局文件使用组件时,通过 组件传值属性="值" 的方式进行传值

示例:向组件内传值

1. 组件部分

在组件逻辑文件中定义接收外部传值的属性

// 调用组件函数
Component({
  // 定义接收外部传值的属性
  properties: {
    message: ''
  }
})

2. 页面部分

(1) 页面配置文件中声明要使用的组件:

{
  "usingComponents": {
    "HOME":"../../components/home/Home"
  }
}

(2) 在页面逻辑文件中定义页面数据,用来演示页面数据传值:

Page({
  // 页面数据
  data: {
    pageData: '传给组件的值'
  }
});

(3) 分别使用常量的方式和页面数据的方式向组件内部传值:

<!-- 使用常量的方式传值 -->
<HOME message="传给组件的值"></HOME>
<!-- 使用页面数据的方式传值 -->
<HOME message="{{pageData}}"></HOME>

3. 运行效果:
父传子

2.2. 组件向外传值


组件向外传值也称子传父,最常见的就是下面的场景:
子传父场景
场景分析:主页面有两部分,第一部分引入分类组件,第二部分根据组件选择的分类在主页面中显示具体分类内
容,这就要求主页面必须知道组件中具体选择了哪个分类,这就是典型的子传父使用场景


组件向外传值只需要两步:

  1. 组件内使用 this.triggerEvent('自定义事件名', 值) 发布一个自定义事件
  2. 页面中使用组件时,在组件标签内绑定自定义事件,然后使用 事件对象.detail 从事件对象中获取组件传递的值

示例:组件向外传值

1. 组件部分

在组件逻辑文件中发布自定义事件

// 调用组件函数
// 调用组件函数
Component({
  // 生命周期函数 - 组件创建完毕后回调
  ready(){
    // 发布自定义事件
    this.triggerEvent('myEvent', '子组件传递的内容')
  }
})

2. 页面部分

(1) 页面配置文件中声明要使用的组件:

{
  "usingComponents": {
    "HOME":"../../components/home/Home"
  }
}

(2) 页面逻辑文件中声明自定义事件的处理函数,并获取组件传递的值:

Page({
  // 页面数据
  data: {
    message: ''
  },
  // 监听组件的自定义事件
  handleEvent(e){
    this.setData({
      // 获取传递组件的值
      message:e.detail
    })
  }
});

(3) 页面布局文件中,使用组件时在组件标签内绑定自定义事件:

<!-- 使用组件时监听自定义事件 -->
<HOME bind:myEvent="handleEvent"></HOME>
<!-- 展示组件传递的值 -->
<view>{{message}}</view>

3. 运行效果:
子传父

三、插槽

插槽的功能是让组件中的一部分布局由父页面添加,这样可以让组件有更高的复用性,目前版本的微信小程
序 ( v2.23.4 ) 中,还不支持插槽的默认布局,这一点与 Vue 不同


3.1. 单插槽


使用单插槽的方式非常简单,在组件布局时,将想让父页面传入的部分使用 <slot> 标签占位,然后在父页面使用组
件时,在组件标签中间传入布局即可


示例: 单插槽

1. 组件部分

在组件布局文件中使用 <slot> 占位,由父组件传入具体布局:

<view style="display: flex; border:1px solid black;">
  <!-- 组件左侧布局 -->
  <view style="flex:2; text-align: center; ">组件固定左侧内容</view>
  <!-- 组件中间布局 - 插槽由引入组件的页面设置 -->
  <view style="flex: 3; text-align: center;">
    <slot></slot>
  </view>
  <!-- 组件右侧布局 -->
  <view style="flex:2; text-align: center;">组件固定右侧内容</view>
</view>

2. 页面部分

在页面布局文件中,使用组件时,在组件标签内,传入具体的布局替换掉 <slot> 占位:

<!-- 第一次引入组件 -->
<HOME>
  <view>父页面设置的布局内容1</view>
</HOME>
<!-- 第二次引入组件 -->
<HOME>
  <view>父页面设置的布局内容2</view>
</HOME>

3. 运行效果:
单插槽

3.2. 多插槽(具名插槽)


当组件中有多个地方的布局都需要父组件传入的情况,就可以使用具名插槽,使用方式也很简单:

  1. 在组件布局文件中使用 name 属性给每个 <slot> 占位区定义名称
  2. 在组件逻辑文件的 Component 函数的参数中添加属性 options: { multipleSlots: true },设置允许多插槽
  3. 在父页面布局文件中,向组件内传入布局时,通过 slot 属性指定占位区名称,替换掉组件中对应的内容

示例:多插槽

1. 组件部分

(1) 在组件布局文件中使用 <slot> 占位,并设置占位名称,由父组件指名传入具体布局:

<view style="display: flex; border:1px solid black;">
  <!-- 组件左侧布局 -->
  <view style="flex:2; text-align: center; ">组件固定左侧内容</view>
  <!-- 组件中间布局 - 插槽由引入组件的页面设置 -->
  <view style="flex: 3; text-align: center;">
    <slot name="center"></slot>
  </view>
  <!-- 组件右侧布局 - 插槽由引入组件的页面设置  -->
  <view style="flex:2; text-align: center;">
    <slot name="right"></slot>
  </view>
</view>

(2) 在组件逻辑文件中设置允许使用多插槽:

Component({
  options: {
    multipleSlots: true
  }
})

2. 页面部分

在页面布局文件中,使用组件时,在组件标签内,通过 slot 属性指定要替换的占位区名称,替换掉对应的占位:

<!-- 第一次引入组件 -->
<HOME>
  <view slot="center">父页面设置的布局内容1</view>
  <view slot="right">父页面设置的布局内容2</view>
</HOME>

3. 运行效果:
多插槽

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值