微信小程序自定义组件,父传子,子传父,默认插槽,具名插槽

小程序有许多的内置组件,比如之前学习过的 viewimagescroll-viewswiper等,除此之外小程序也允许开发者自定义组件。

5.1 组件基础

自定义组件的结构与页面是一致的,即也包含有4个部分,分别为:

  • .wxml 组件的布局结构

  • .js 组件的处理逻辑

  • .json 组件的配置文件

  • .wxss 组件的布局样式

5.1.1 创建组件

通常习惯将组件放到独立的目录 components 当中,这个目录需要我们手动进行创建。

创建一个叫 authorization 的组件来学习组件创建的步骤,在 components 目录中新建 authorization 目录,然后在右键在菜单中找到【新建 Component】,输入组件名称后会自动创建组件。

组件和页面的结构是一致的,但也是有区别的,先简单有个了解:

  • 组件的配置文件中配置项 component: true

  • 组件的 .js 文件中调用 Component 函数

如果报 什么什么忽略 的错就在project.private.config.json文件夹的setting里面加上以下代码

报错原因,建了应用,没有使用

"setting": {
    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles":false
  },

5.1.2 注册组件

组件的注册分为页面注册全局注册两种情况:

  1. 页面注册是在使用组件的页面配置中通过 usingComponents 进行注册,只能在当前页面中使用注册的组件,如下代码所示:

{
  "usingComponents": {
    "authorization": "/components/authorization/index"
  }
}




  1. 全局注册是在 app.json 文件中通过 usingComponents 对自定义组件进行注册,注册的组件可以任意页面中使用全局注册的组件,如下代码所示:

{
  "pages": [...],
  "window": {...},
+  "usingComponents": {
+    "authorization": "/components/authorization/index"
+  },
  "sitemapLocation": "sitemap.json"
}

一些需要注意的细节:

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。

  • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。

  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

文档:自定义组件 | 微信开放文档

5.2 组件进阶

本节来学习如何处理组件的逻辑。

5.2.1 数据变量和方法

了解数据变量、方法定义和使用

  • data 组件本身内部定义的数据

  • methods中定义组件的方法

// components/authorization/index
Component({
  // 初始组件内部数据
  data: {
    message: '组件中初始的数据'
  },
  methods: {
    // 定义事件回调函数
    handlerClick() {
      console.log('clicked')
    },
  },
})

5.2.2 组件通信

自定义组件有自已的作用域,然而在实际开发中,父子组件之间的数据传递是不可避免的。

父传子

  1. 父组件通过属性赋值为子组件传递数组



   
  
  1. 子组件通过properties接收父组件数据

Component({
  // 接收父组件数据
  properties: {
    isLogin: Boolean, 
    tips: {
      // 属性的数据类型
      type: String,
      // 属性的默认值
      value: 'hello'
    }
  },
})
  1. 查看或调试传入组件的数据与页面数据的查看方式不同,具体查看如下图所示: 说明❓:选中要查看的组件,通过右侧component data面板查看

注意:可以直接修改父组件传递的数据(父组件不受影响)

子传父

  1. 父组件在子组件上绑定自定义事件,提供自定义事件回调方法

    在自定义事件回调方法中,通过默认形参event.detail获取数据



   
  
// pages/index/index.js Page({ // 父组件中的数据 data: { }, // 自定义事件的回调 mycallback: function (e) {   console.log('我是父组件中的回调函数...',e); } })
  1. 子组件触发父组件自定义事件

    通过this.triggerEvent('自定义事件名称',data)触发和传递数据

Component({
  // ...
  // 组件方法,可用于事件监听回调函数
  methods: {
    sayHi: function () {
      // 并且将 {name: '小明', age: 18} 做为参数,传给父组件自定义事件的回调函数
      this.triggerEvent('事件名', {name: '小明', age: 18});
    }
  }
})

5.2.3 生命周期

前面我们分别学习了应用级别和页面级别的生命周期,组件也有生命周期函数,通过 lifetimes 来定义,主要的生命周期函数有:

  • attached 在组件实例进入页面节点树时执行

  • detached在组件实例被从页面节点树移除时执行

Component({
  // ...
  // 组件生命周期
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});

扩展-组件模板

小程序的组件模板其实就是插槽功能,通过 在组件内部定义插槽位置,以 authorization 组件为例其用法如下所示:

  1. 在组件内定定义 slot 插槽,插槽其实就是个占位符号


  
  1. 在首页面应用组件并在组件开始和结束位置中间插入内容,被插入的内容就会被渲染到插槽的位置上:


  默认slot 插槽
  默认slot 插槽

默认情况小程序在一个组件中只能支持一个插槽,如果需要多个插槽需要启用多 slot 支持,启用方式如下所示:

  1. 启用多插槽支持

Component({
  options: {
    // 启用多插槽支持
    multipleSlots: true
  }
})
  1. 启用了多插槽支持后通过 name 为插槽命名:


  


  
  1. 在应用组件时通过 slot 属性指定将内容放入哪个插槽的位置:


  
    具名slot 插槽的位置
    具名slot 插槽的位置
  
  1000

5.3 Vant 组件

Vant 提供了微信小程序版本的组件库,它本质上就是自定义的小程序组件,我们来学习如何在小程序中引入 Vant 组件库。

5.3.1 快速上手

第 1 步:安装 vant 组件库

npm i @vant/weapp -S --production

第 2 步:如下图所示构建 Vant 组件库,构建时会去检查 package.json 中记录的依赖,因此一定要有 package.json 文件的存在。

第 3 步:以按钮组件为例,演示使用 Vant 组件的使用方法,推荐全局注册组件 Vant 组件

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

注意:将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

5.3.2 Cell 单元格

介绍常用组件使用方法

  1. 首先要在 app.json 中全局注册组件:

{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  }
}
  1. van-cell 组件可以独立使用,也可以配置 van-cell-group 一起使用:


  
    审核失败
  
  
  

5.3.3 SwipeCell 滑动单元格

  1. 同样的先在 app.json 中全局注册组件:

{
  "usingComponents": {
    "van-swipe-cell": "@vant/weapp/swipe-cell/index"
  },
}
  1. 然后将需要侧向滑动的盒子用 van-swipe-cell 组件包裹起来即可:


  
    
      审核失败
    
    
    
  
-  
+  删除

扩展-样式覆盖

Vant 组件中的组件提供了非常整齐美观的样式,但是开发中在所难免需要对原有样式进行个修改

  • 简单粗暴,通过调试工具查找要修改样式的盒子,找到已定义的类名,然后强制覆盖原有的样式

.van-swipe-cell__right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px !important;
  margin-left: -20px;
  text-align: center;
  color: #fff;
  background-color: #eb5757;
}

::: tip 提示: 在进行样式覆盖时优先不够的情况下使用 !important :::

  • 使用样式变量

新版本的 css 支持定义变量,其语法样式为: --变量名: 值,定义的变量通过 var 关键字来使用:

  1. 局部变量

举例说明:

.box {
  --my-cusotm-color: pink;
  backgound-color: var(--my-cusotm-color);
}

上述代码中定义的变量只能用在 .box 盒子及后代元素上

  1. 全局变量

如果希望整个页面都能使用这个变量,可以这样定义:

page {
  --my-cusotm-color: pink;
}
​
.box {
  backgound-color: var(--my-cusotm-color);
}
.navs {
  backgound-color: var(--my-cusotm-color);
}
  1. 了解了 css 变量的基本用法后,咱们修改 vant 中 css 变量覆盖原来样式:

说明❓:通过调式面板,查看组件元素中用到的css变量进行覆盖

page {
  --cell-large-title-font-size: 30rpx;
  --cell-text-color: #c3c3c5;
  --cell-value-color: #686868;
}

你可能感兴趣的:(微信小程序,微信小程序,小程序,前端)