微信小程序自定义组件中的注意事项(包含ES6的箭头函数，解构赋值)

空谷丶幽兰

于 2020-11-10 23:19:15 发布

阅读量536

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/yangaoyuan1999/article/details/109608782

版权

本文介绍了微信小程序中创建和使用自定义组件的步骤，包括组件的命名、调用及构建导航条。特别强调了在.js文件中利用ES6的解构赋值来优化代码的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建自定义组件：

	1.在微信开发者工具中新建文件夹
	2.点击文件右键点击"新建components"
	3.命名文件，将会创建四个文件（.js文件中显示Component而不是Page）

在这里插入图片描述

命名组件：

1.在Pages文件夹中新建一个页面(create)
2.在.json文件中的 "usingComponents" 中加入"标签名"："自定义组件路径"

{
   
  "usingComponents": {
   
    "Tabs":"../../components/Tabs/Tabs"
  }
}

调用组件：

1.在(create)这个文件的wxml文件中加入Tabs标签即为调用

<Tabs></Tabs>

用自定义组件写一个导航条：

1.页面的js文件存放事件回调函数的时候，存放在data的同层级下
2.组件的js文件存放事件回调函数的时候，必须存放在methods中
3.步骤：
 ①绑定点击事件，需要在methods中绑定
 ②获取被点击的索引
 ③获取原数组
 ④对数组循环（给每一个循环项，选中属性改为false，给当前的索引项添加激活）

<view class="tabs">
  <view class="tabs_title">
  
<!-- <view class&

最低0.47元/天解锁文章