小程序自定义组件Component超全适用指南 (小程序自定义属性)

本文目录导航：

• 小程序自定义组件Component超全适用指南
• 小程序自定义组件经常使用时外部用div
• 如何经常使用微信小程序组件

小程序自定义组件Component超全适用指南

在小程序中，想要将页面内的性能模块形象进去，在不同的页面中重复经常使用，咱们可以经常使用它的自定义组件，自定义组件可以将复杂的页面拆分红多个低耦合的模块，这样不只经常使用起来繁难，而且还有助于咱们的代码保养。

前言

本文你将收获

?小程序如何经常使用自定义组件

?自定义组件之间的各种传值

?自定义组件中插槽的经常使用

?排雷，本文的小程序指的是微信小程序（不过其余的小程序思绪应该差不多）

?排雷，本文重要内容是自定义组件的各种用法，不是教大家怎样封装组件哈！

基础预备（可疏忽）新增文件夹

首先在根目录下创立一个专门放自定义组件的文件夹（文件夹称号恣意，位置也恣意）

新建Component文件

而后在小程序编辑器里，右键，新建Component

为什么要特地说这一步呢？

不知道有没有小同伴们和我一样不时只把小程序开发工具当预览工具用，而后开发是用其余编辑器的。

前面发现间接在小程序新建Component或许Page，它会一口吻把四个文件都建好，并且内容模板也会填好，所以如今开发者工具除了预览，我还用它新建文件。

示例背景说明

咱们前面就以相似下图中的模块宰割题目为例写一个繁难的组件示例（只是瞎举例）

怎样引入自定义组件？

创立不多说，如以上【新建Component文件】即可，假设是自己手动创立，别忘了在json文件申明（小程序开发工具新建的自动就有）

{component:true}

引入组件方法

在页面的json文件中启动援用申明

{usingComponents:{x-title:/components/title/title}}

在页面的wxml中像经常使用基础组件一样经常使用自定义组件（名字和申明的坚持分歧）

<x-title></x-title>怎样传值？父组件给子组件传值

可以看到咱们上方把题目标内容写死了，然而实践中经常使用咱们必需是须要依据不同的模块，传入不同的题目内容，这样咱们就须要经常使用到父子之间的传值了。

父级给子级传值

<x-titletitleText=所有订单></x-title><x-titletitleText={{currentTitle}}></x-title>

子级接纳父级传上来的值

properties:{titleText:{type:String,value:其余}}, 子组件给父组件传值

把组件稍微修正一下，新增了概略操作按钮，以后经过循环已得出多个模块，如今想在点击概略的时刻，子级把以后模块的id传给父级。

子组件给父组件传参

<viewclass=title-operbindtap=gotoDetail>概略</view>gotoDetail(){(gotoDetail,)}

父组件接纳子组件的参数

<x-titletitleText={{}}titleId={{}}bind:gotoDetail=gotoDetail></x-title>//经差错掉子组件传上来的参数gotoDetail(e){constid=(从子组件接纳到的id,id)} 父级调用子组件的方法

子组件定义了一个方法

childMethod(){(我是子组件的方法)},

父级先给子组件一个id

{usingComponents:{x-title:/components/title/title}}0

在js页面的生命周期中失掉组件，而后存到咱们自定义的变量titleCom中，接着便可间接调用子组件外面的方法了

{usingComponents:{x-title:/components/title/title}}1

假设()前往为null

1、审核wxml定义的id和js经常使用的能否分歧；

2、自定义组件能否渲染，例如你经常使用了wx:if，造成组件还未渲染

传值官方关系文档：地址

在自定义组件中经常使用插槽（slot）

咱们上方在自定义组件中加了【概略】检查的操作按钮，然而有的中央咱们或许并不想用文字，想改成图标或许按钮，当某处搁置的节点内容不确定时，咱们就可以经常使用插槽来解决。

插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充html了。

单插槽

在子组件参与插槽

{usingComponents:{x-title:/components/title/title}}2

父级即可在组件内恣意填充内容，比如拔出一个图标（假设子级没有加slot，及时填充了html也不会被渲染）

{usingComponents:{x-title:/components/title/title}}3 多插槽

先在子组件的js开启一下多slot支持

{usingComponents:{x-title:/components/title/title}}4

在子组件加上插槽须要给插槽加上名字

{usingComponents:{x-title:/components/title/title}}5

在父级经常使用

{usingComponents:{x-title:/components/title/title}}6 留意

问：为什么加了插槽，却没有反响？

只管我只在【子组件】加了1个插槽，然而由于加上了名字，所以雷同须要在【子组件】的js里开启多插槽

{usingComponents:{x-title:/components/title/title}}7

插槽官方文档：地址

Component的生命周期{usingComponents:{x-title:/components/title/title}}8

生命周期官方：地址

小程序自定义组件经常使用时外部用div

题主能否想征询“小程序自定义组件经常使用时外部能经常使用div标签吗”？能。

小程序自定义组件经常使用时外部是能经常使用div标签的，div标签称为区隔标志，作用是设定字、画、表格等的摆放位置，可以将文字、图象、放在div标签中。

如何经常使用微信小程序组件

经常使用微信小程序组件，首先须要创立组件，而后在页面中启动援用，并经过性能来定义组件的属性和行为。

上方将具体解释这个环节。

创立组件在微信小程序中，组件的创立理论触及以下几个步骤：1. 在名目标根目录中，创立一个新的文件夹来寄存组件文件。

例如，可以右键点击根目录，选用“新建文件夹”，命名为“components”。

2. 在新建的“components”文件夹中，再次右键点击，选用“新建Component”。

此时，须要为组件命名，比如“myComponent”。

3. 命名成功后，系统会智能生成该组件对应的四个文件，区分是、、和。

援用组件创立好组件后，须要在页面中经常使用该组件。

这理论经过以下步骤成功：1. 在页面的性能文件中，减少“usingComponents”字段，并在其中申明要经常使用的组件及其门路。

例如：`usingComponents: { myComponent: /components/myComponent/myComponent }`。

2. 在页面的模板文件中，就可以像经常使用HTML标签一样经常使用自定义的组件了。

例如：``。

性能组件属性和行为为了让组件愈加灵敏和可复用，理论须要为其性能属性和行为。

这可以经过以下几个方面来成功：1. 属性传递：在组件的文件中，经过properties字段来定义组件接纳的属性。

这些属性可以从父组件中传递出去，并在组件外部经常使用。

例如，可以定义一个名为“title”的属性，用于显示组件的题目。

2. 事情解决：组件可以触发自定义事情，并与父组件启动通讯。

在组件的文件中，可以经常使用methods字段来定义事情解决函数。

而后，在模板文件中，经过bind指令来绑定事情解决函数。

例如，可以定义一个名为“tapEvent”的事情解决函数，当用户点击组件时触发该事情，并通知父组件启动相应的解决。

3. 插槽经常使用：插槽是微信小程序提供的一种灵敏的内容散发机制。

经过在组件的模板文件中定义插槽，可以准许父组件向子组件中拔出自定义的内容。

这使得组件愈加通用和可裁减。

例如，可以定义一个名为“content”的插槽，用于显示父组件传递的自定义内容。

总的来说，经常使用微信小程序组件须要遵照必定的创立、援用和性能流程。

经过正当地定义组件的属性和行为，以及应用插槽等机制，可以构建出灵敏、可复用且易于保养的微信小程序界面。